Explain the difference between style-loader and css-loader

Beginner

Answer

css-loader:

  • Interprets @import and url() like import/require()
  • Resolves CSS dependencies and returns CSS as a string

style-loader:

  • Injects CSS into the DOM by adding <style> tags
  • Usually used after css-loader in the chain
// This processes CSS files and injects them into the DOM
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

For production, you might use MiniCssExtractPlugin.loader instead of style-loader to extract CSS into separate files.