CODEWITHSUNDEEP
javascriptwebpackwebpack-style-loadercss-loader
Sebastian
Sebastian

Reputation: 1315

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?

Upvotes: 2

Views: 63

Answers (1)

hackerrdave
hackerrdave

Reputation: 6706

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.

Upvotes: 0

Related Questions