WebPack. СКС. повторяющийся код после @extend

Question

Я пытаюсь понять, как создавать стили в веб-пакете, и у меня возникла проблема. Я хотел бы, чтобы классы CSS, использующие один и тот же @extend, были сгруппированы вместе, чтобы избежать дублирования кода.

У меня есть файлы:

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/optimisations/ указывает, что эта опция включена по умолчанию. Я попытался включить его сам, указав mergeRules: true в cssProcessorOptions, но это не сработало.

Answer 1

Это известная проблема с sass-loader есть альтернатива sass-loader-once который использует node-sass-import-once под капотом, просто используйте его.

Оформить заказ в этой ветке: https://github.com/webpack-contrib/sass-loader/issues/145