Styles are getting duplicated in development mode

[just-boris]

I have the following files:

common.css

.test {
    color: purple; /* just some styles to test */
}

component.css

@import './common.css';

styles.css

@import "./common.css";
@import "./component.css";

In the output bundle I have the following:

.test {
    color: purple;
}

.test {
    color: purple;
}

The references to common.css are not merged and the content is rendered twice. This happening only in mode: "development", and is actually caused by NamedModulesPlugin. Removing this module from config fixes the issue.

P.S. there is a repository, that you can checkout locally and reproduce the issue: https://github.com/just-boris/mini-css-extract-plugin-283

[xxzhiwei]

you can use webpack.optimization split the css

[alexander-akait]

Or use minification plugin, it is out of scope this plugin

[TakCastel]

Why is this issue closed ? I encountered the same problem :'(

[alexander-akait]

@TakCastel because removing duplicates is out of scope this plugin, if you will use browsers you will have same behavior, you can use https://github.com/webpack-contrib/css-minimizer-webpack-plugin to avoid this