mini-css-extract-plugin can not extract node_module css file

[aflext]

• Operating System: win7
• Node Version: v10.12.0
• NPM Version: 6.4.1
• webpack Version: 4.29.6
• mini-css-extract-plugin Version: 0.6.0

Below could build all of my scss files and css files into several stylesheet injections into the html file:

{
    test: /\.(scss|css)$/,
    use: [
        // MiniCssExtractPlugin.loader,
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
    ]
}

Below cound only build one css file but without the node_module css file

{
    test: /\.(scss|css)$/,
    use: [
        MiniCssExtractPlugin.loader,
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
    ]
}

But with "extract-text-webpack-plugin": "^4.0.0-beta.0" everything behaves as expected.
So, i wonder if there is a bug about extracting css file from node_modules?

[alexander-akait]

Please provide minimum reproducible test repo

[VitGottwald]

Same thing happened to me. The actual problem was with the package.json of the node module being imported. It specified sideEffects field https://webpack.js.org/guides/tree-shaking/ incorrectly and the css was removed in production mode. I am not sure if it was done by mini-css-extract-plugin or the webpack proper.

[alexander-akait]

webpack, css has side effects

[BenjaminWFox-Lumedic]

This was the same issue for me as @baremetalfreak mentioned. I changed:

"sideEffects": false, -> "sideEffects": true,

and CSS was correctly emitted.

My issue was that I imported all of my CSS in App.js, import CssTheme from './theme', but never did anything with the imported variable so it was assumed to be unused. I was able to verify that this was the case by just console.log(CssTheme) while I still had "sideEffects": false, in my package.json

[tuananh]

@aflext @BenF-Lumedic can you share how did you fix it?

in my case, problem is with react-image-gallery

[alexander-akait]

Answer https://github.com/webpack-contrib/mini-css-extract-plugin/issues/386#issuecomment-489184730

You can mark only css as side effect using this "sideEffects": ["*.css"], in package.json