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
  • "style-loader!raw-loader!sass-loader"

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:

• "style-loader!css-loader?sourceMap!sass-loader?sourceMap"