Mini-css-extract-plugin: Doesn't extract when in production mode

[MikaAK]

PackageVersion: 0.4.2
Node: 9.3.0

Adding the following seems to work in development mode, but when switching to production mode it no longer emits the css files.

plugins: [new MiniCssExtractPlugin({
  filename: '[name]-[contenthash].css'
})],

module: {
  rules: [{
      test: /\.s?css/,
      include: SRC_PATH,
      use: [
        MiniCssExtractPlugin.loader,
        {loader: 'css-loader', options: {importLoaders: 2}},
        'postcss-loader',
        {loader: 'sass-loader', options: {includePaths: SASS_INCLUDES}}
      ]
    }]
}

This configuration works find in development mode but not production

[alexander-akait]

@MikaAK looks you have invalid configuration, please provide minimum reproducible test repo

[MikaAK]

https://github.com/Lure-Consulting/javascript-projects-starter/tree/svelte @evilebottnawi

Run webpack --mode development and webpack --mode production

[edmorley]

@MikaAK the problem appears to be that the project sets an incorrect "sideEffects" configuration in its package.json - in that it says that anything but *.pug does not have side-effects and can be dropped as an optimization in production. Adding "*.scss" to "sideEffects" causes the CSS to be emitted.

See the caveats here:
https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

[MikaAK]

So it does! Thanks @edmorley

[alexander-akait]

Solved https://github.com/webpack-contrib/mini-css-extract-plugin/issues/275#issuecomment-426356664