If you @import a lot of scss/sass/css files, the style loader can take a looong time to finish loading. How to improve? Lets take a look at what each of them does:
- raw-loader: loads files in as string
- css-loader: raw-loader, plus resolve @import in css files (if used with style-loader, provide support for source-map too, because:)
- style-loader: insert a <style> tag on the page, loading only the styles that are used (which means no info about which files styles come from)
- extract-text-webpack-plugin: take all the files and concat them into one
- sass-loader: loads sass/scss/css files, plus resolve all the @import. Supports source-map.
Options to improve run time:
- When relying on libraries, do NOT @import all their styles. Import specific files that you will be needing in that specific file. The more files you @import, the (much) longer it will take.
- If you’re using sass-loader, and don’t have strong need for source-maps, use raw-loader in place of css-loader. Because sass-loader already deals with @import, so we can lift that responsibility off css-loader’s shoulders
On the other hand, if you think source map is necessary, don’t forget to add sourceMap option to css-loader to make it work. In our experience, using css-loader consistently doubles loader run time though: