Question

我试图弄清楚如何在网络包中构建样式并且我遇到了问题。我希望将使用相同的@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 }
            }
        })
    ]
...

在输出中，我收到一个缩小的文件（我将其展示为show）

的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/表示默认启用此选项。我试图自己包含它，在cssProcessorOptions中指示mergeRules：true，但这不起作用。

Answer 1

It is a known issue with sass-loader, there is an alternative sass-loader-once that uses node-sass-import-once under the hood, just use it.

Checkout that thread: https://github.com/webpack-contrib/sass-loader/issues/145#issuecomment-272800892

的WebPack。 SCSS。在@extend之后重复代码

1 个答案: