This is a summary of an exceptional video I watched on youtube related to webpack 2 style loaders. All concepts here are still relevant in the most recent webpack version (4)
Definitions
CSS-loader – Takes your css files and adds them to your bundle
SASS-loader – takes sass/css files and adds them to your bundle.
Style-loader – Takes a stylesheet that has been added to your bundle and converts it into a style tag. I.e. load your css to style tags.
To use any of these loaders just add them to your rules like this.
rules: { test: RegExp, use: [applied, in, reverse], test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
But this inlines each of your styles as it’s own individual file into the header. What if you wanted to just include a single file?
Enter the extract-text-webpack-plugin
It wraps all the files and then combines them into a single file. You add this to the plugins area
plugins: [ new ExtractTextPlugin({ filename: "new-stylesheet-name.css", disabled: isDev, allChunks: true }) ]
and then update the scss rule to use the plugin
rules: { test: /\.scss$/, use: ExtractTextPlugin({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'], publicPath: '/dist' }) }