webpack.SCSS.@extend之后重复代码

Question

我正在尝试弄清楚如何在WebPack中构建样式，并且有问题。我希望使用相同@Extend进行分组以避免复制代码的CSS类。

我有文件：

common.scss：

p {
    margin: 0 0 1em;
}
%common {
    display: flex;
}

c1.scss：

@import "./common.scss";
.c1 {
    @extend %common;
}

c2.scss：

@import "./common.scss";
.c2 {
  @extend %common;
}

webpack.config.js：

...
   module: {
        loaders: [
            {
                test: /.js/,
                exclude: /node_modules/,
                loaders: ['babel-loader'],
                include: path.join(__dirname, 'js')
            },
            {
                test: /.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("./css/style.css"),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /css/style.css$/,
            cssProcessor: cssNano,
            cssProcessorOptions: {
                autoprefixer: { add: true },
                discardDuplicates: true,
                discardComments: {removeAll: true }
            }
        })
    ]
...

在输出时，我收到了一个缩小文件(我未经消息以显示(

style.css

.c1 {
    display: -ms-flexbox;
    display: flex
}
p {
    margin: 0 0 1em
}
.c2 {
    display: -ms-flexbox;
    display: flex
}

是否可以将使用相同的@Extend(在这种情况％common(分组的类中进行分组？如下：

.c1, .c2 {
    display: -ms-flexbox;
    display: flex
}
p {
    margin: 0 0 1em
}

postcss-merge-rules-看起来像我需要的，但是这里http：//cssnano.co/optimisation/表示默认情况下启用了此选项。我试图自己包含它，指示合并：在CSSsprocessoroptions中，但这无效。

Answer 1

这是sass-loader的已知问题，有一个替代sass-loader-once使用引擎盖下的node-sass-import-once，只需使用它。

结帐该线程：https：//github.com/webpack-contrib/sass-loader/issues/145#issuecomment-272800892