Difference: Webpack css-loader and raw-loader

Question

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:

What exactly is the difference between the two?
What might be a problem if I were to replace css-loader with raw-loader in order to reduce run time?

Lucia · Accepted Answer · 2017-03-01 19:49:11Z

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.

edited Mar 1, 2017 at 19:49

answered Mar 1, 2017 at 19:43

Lucia

13.7k7 gold badges49 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Difference: Webpack css-loader and raw-loader

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related