Search code examples
javascriptwebpackwebpack-style-loadercss-loader

Why does webpack have separate loaders for loading css and injecting it to the website?

Why does webpack have separate loaders for loading css (css-loader) and injecting it to the website (style-loader), if first is useless without the second?

Could you point out a scenario in which I'd use css-loader without style-loader?

Solution

  • The style-loader loader is just one of many different ways to ultimately have your styles included on your page. For example, you could use the ExtractTextPlugin to generate a .css file separate from your bundle file:

    module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: ['css-loader']
      })
    }
  ]
},
plugins: [
  new ExtractTextPlugin({
    filename: 'app.css'
  })
]

    This gives you the flexibility to load your css separately from the rest of your bundle, so you can prevent FOUC.