Search code examples
javascriptwebpackcreate-react-appwebpack-style-loadercss-loader

Any way to generate <link>'ed instead of inline stylesheets from Webpack?

If I have the following code in a webpack project with css-loader and style-loader plugins:

import 'index.css'

It generates an inline style in a <style> tag. Is there any way to leverage browser caching feature by having it generate a <link rel="stylesheet" href="index.css"> instead? I know I can put CSS files in the public folder, but then it won't be in the Webpack build pipeline. Is there some existing CSS loader plugin that does this? Or are there strong arguments for abandoning this approach altogether (ofc. not putting them render-blockingly in the document <head>)?

Solution

  • There are no arguments against this. I would even say this is more common than to leave the css in the chunks. But you need to use a plugin for this.

    Until recently the go to here was extract-text-webpack-plugin, but now if you are using webpack 4 I would suggest mini-css-extract-plugin.

    You might want to turn this off for local development. It gets in the way of HMR.