5

So according to this question, css-loader loads file as string, resolves webpack dependency according to require, and style-loader inserts style tag into page, and in many cases, css-loader can be replaced by raw-loader.

I'm currently using:

loader: ExtractTextPlugin.extract("raw-loader!postcss-loader!sass-loader?sourceMap&" + sassIncludePaths.join(""))

And there are requires in the .scss files, but I don't see a problem with raw-loader yet. So question is:

  1. What exactly is the difference between the two?
  2. What might be a problem if I were to replace css-loader with raw-loader in order to reduce run time?
Community
  • 1
  • 1
Lucia
  • 13,033
  • 6
  • 44
  • 50

1 Answers1

9

From my own understanding:

The main difference between raw-loader and css-loader is that the former loads in files as is, while the latter sort through webpack requires. Therefore, the usual use case for css-loader is to combine it with style-loader, which inserts an tag into the page, so that it contains only the styles that are used on that page.

However, in our case, we extractTextPlugin them into one single file anyway, so we can just use raw-loader instead, which saves almost half the time.

Also that sass-loader resolves @imports too, which is the only dependency we're using, so the setup should be doubly fine.

Lucia
  • 13,033
  • 6
  • 44
  • 50