Webpack: Style tag per required css file

Question

I want to have one tag per required .css file.

I want it like that because I want to connect chrome dev-tools workspace feature to my src folder, so I could edit my css files directly from the browser.

Here's my research on loaders:

style-loader only loads into style tags
style-loader/url + file-loader doesn't work (I tried the README example)
extract-text-webpack-plugin seems to only generate ONE bundle per ALL css files with default configuration.
The Modify Files section in extract-text-webpack-plugin suggests that with multiple entry points, it's possible to generate multiple bundles, so I thought that it might be possible to abuse this feature to get the behaviour I want.

This is of course for development and I don't intend on serving my css this way.

Meme Composer Meme Composer · Accepted Answer · 2017-04-16T18:12:43

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }
  ]
},
plugins: [ 
  new ExtractTextPlugin('[name].css'),
  new HtmlWebpackPlugin({
    template: 'path/to/your/index.html',
  })
],
resolve: {
  extensions: [ '.js', '.css' ]
}

Then in your js files, do import path/to/your/stylesheet.css; for each stylesheet you want webpack to extract.

Note: you need to install html-webpack-plugin and add it like above so that webpack can insert references to your stylesheets. Click HERE to learn more about the options for HtmlWebpackPlugin

Webpack: Style tag per required css file

1 Answers