webpack less 解析打包后的css代码出现重复

Question

首先我使用了一个normalize.less，然后在每一个组件的Less文件里面@import这个normalize文件。如下：

Normalize：

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

Header 组件：

@import './normalize.less';
.fg-header {
    background-color: @fg-black;
    height: 88px;
    width: 100%;
}

Footer组件：

@import './normalize.less'
.fg-footer {
    background: @fg-black;
    color: @fg-white;
    display: block;
    height: 140px;
    text-align: center;
}

然后使用less编译后打包成一个style.css文件，但是这个style.css文件里面，配置文件如下：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractLess = new ExtractTextPlugin('./style/style.css');
module.exports = {
    entry: {
        base: path.resolve(__dirname,'./dev/app.js'),
        vendors: ['react']
    },
    
    ...
    
    module: [
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        },
    ]
    plugins: [
        ExtractLess
    ]
}

但是打包成功后style.css里面出现重复的normalize代码：

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
.fg-header {
    background-color: @fg-black;
    height: 88px;
    width: 100%;
}
.fg-footer {
    background: @fg-black;
    color: @fg-white;
    display: block;
    height: 140px;
    text-align: center;
}

这怎么配置能够解决？

Answer 1

问题已过时。目前 webpack 版本不会出现这样会的问题。其他 CSS 优化去重问题可以参考 css purify 或 css optimze

Answer 2

試著加入 plugin

new webpack.optimize.DedupePlugin()

不過即便沒有使用這個 plugin 我試做您的範例依然沒有重複

demo

Answer 3

不要在每个组件都引入 css 文件，在 Header 与 Footer 的父组件引用一次就不会重复了

Answer 4

webpack 4.0中使用require('optimize-css-assets-webpack-plugin')进行优化和压缩就可以了

Answer 5

我的也重复了啊

Answer 6

???没答案吗