This is a summary of an exceptional video I watched on youtube related to webpack 2 style loaders.
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.
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
and then update the scss rule to use the plugin
loader: [‘css-loader’, ‘sass-loader’],