Today I Learned

Add shared styles, bundle and remove duplicates config

Recently I wanted to refactor styles in project. Earlier it was imported as on file into index.js. I decided to refactor styles to ‘style per component’.

My ultimate file with styles looks like this:

Zrzut-ekranu-2019-08-17-o-14-19-07

Here is the way to add loader for styles. I use MiniCssExtractPlugin.loader instead of style-loader. With Webpack 3 (and earlier) we used ExtractTextPlugin for bundling but it's deprecated in Webpack 4, and we need to use MiniCssExtractPlugin. I'm also importing my common file with sass-resouce-loader. It's recommended to pass an array of sass files, but I have pretty many imports, so I joined all in one file.

Zrzut-ekranu-2019-08-17-o-14-16-56

At the end we need to add plugins for bundling (MiniCssExtractPlugin) and optimizing our styles (OptimizeCssAssetsPlugin).

Zrzut-ekranu-2019-08-17-o-14-18-10