Webpack - MiniCssExtractPlugin doesn't extract file

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode. Blockquote

in your package.json, add:

"sideEffects": [    '.scss' ]

In Webpack 4, you can add "sideEffects: true" to the loader to prevent the compiler from dropping the CSS file output by MiniCssExtractPlugin.loader (See Webpack Tree Shaking Guide). This works with Angular + TypeScript (using "module:" "ES2015" in tsconfig). I imagine it would work for your set up as well.

{    test: /\.scss$/,    include: [      helpers.root('src', 'assets')    ],    sideEffects: true,    use: [      MiniCssExtractPlugin.loader,      {loader: 'css-loader'},      {loader: 'resolve-url-loader'}, // Angular only      {loader: 'sass-loader'},    ]},

Check that you have set the NODE_ENV environment variable.

In your config the extracting of css to separate files (MiniCssExtractPlugin) will only occur when building for production, in other words, when NODE_ENV is set to 'production'. When building for development style-loader is being used which will inject the css within a tag.