Webpack构建SCSS时@extend代码重复问题及类合并需求

我之前也碰到过一模一样的问题——当不同SCSS文件里的类@extend同一个占位符时，Webpack编译后居然没有把这些类归组到一起，导致重复输出相同的样式代码。其实核心原因很简单：Webpack默认会将每个SCSS文件作为独立的模块单独编译，这就意味着Sass编译器在处理c1.scss的时候，并不知道c2.scss也用了同一个%common占位符，自然没法合并选择器。

下面是具体的解决办法：

1. 统一SCSS编译上下文 #

把所有需要共享占位符的SCSS文件导入到一个主入口文件中，让Sass在同一个编译流程里处理所有依赖，这样它就能识别到哪些类都extend了同一个占位符，进而合并选择器。

比如创建一个main.scss文件：

// main.scss
@import "./common.scss";
@import "./c1.scss";
@import "./c2.scss";

然后在你的项目入口JS文件里导入这个main.scss，或者直接把它设为Webpack的一个入口。

2. 调整Webpack Loader配置 #

确保你的Webpack配置正确处理SCSS文件，这里需要用到sass-loader、css-loader，以及可选的style-loader（注入样式到DOM）或mini-css-extract-plugin（提取成单独CSS文件）。更新后的webpack.config.js规则示例：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // 保留原有的JS处理规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      // 更新SCSS处理规则
      {
        test: /\.scss$/,
        use: [
          // 若要提取独立CSS文件，替换为MiniCssExtractPlugin.loader
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

验证结果 #

完成上面的配置后，重新运行Webpack编译，输出的CSS代码就会变成：

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

这样就完美消除了重复代码，所有使用@extend %common的类都被归组到了一起。

内容的提问来源于stack exchange，提问作者Arrararr