如何通过webpack在构建阶段自动将Scss变量替换为CSS变量

方案1：Sass变量定义全局覆盖（改造成本最低、稳定性最高） #

无需修改业务代码中的Scss变量引用，仅调整变量定义逻辑即可完成全局替换：

• 第一步：提取项目中所有Scss变量的键值对，自动生成全局注入文件，示例如下：
  假设原有变量定义文件variables.scss内容为：

  $color-black: #000000;
  $color-white: #ffffff;
  $font-size-base: 14px;
  

  生成的css-vars.scss内容为：

  // 先挂载所有CSS变量到根节点
  :root {
    --color-black: #{$color-black};
    --color-white: #{$color-white};
    --font-size-base: #{$font-size-base};
  }
  // 覆盖原有Scss变量定义，直接指向对应的CSS变量
  $color-black: var(--color-black);
  $color-white: var(--color-white);
  $font-size-base: var(--font-size-base);
  

  变量数量较多时可以写简单的Node脚本读取Scss变量文件自动生成上述内容，无需手动操作。
• 第二步：在webpack的sass-loader配置中全局注入上述文件，优先级高于原有变量定义：

  // webpack.config.js 对应配置段
  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                additionalData: `@import "path/to/your/css-vars.scss";`
              }
            }
          ]
        }
      ]
    }
  }
  

  配置完成后，所有业务代码中$xxx的变量引用会自动解析为var(--xxx)，完全兼容原有变量依赖逻辑。

方案2：PostCSS插件自动替换 #

通过PostCSS直接处理Scss源码，精准匹配替换变量引用：

• 先安装依赖：npm install postcss postcss-scss postcss-loader -D
• 新增postcss.config.js配置：

  module.exports = {
    parser: 'postcss-scss',
    plugins: [
      // 自定义替换逻辑，可根据业务场景调整匹配规则避免误伤
      (root) => {
        root.walkDecls(decl => {
          decl.value = decl.value.replace(/\$([a-zA-Z0-9_\-]+)/g, (_, varName) => `var(--${varName})`)
        })
      }
    ]
  }
  

• 在webpack的loader链中添加postcss-loader，注意放在sass-loader之前执行。

方案3：修正string-replace-loader配置 #

之前使用该loader失败大概率是执行顺序问题，调整后配置如下：

// webpack.config.js 对应配置段
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        enforce: 'pre', // 设为前置loader，在sass-loader处理前完成替换
        use: [
          {
            loader: 'string-replace-loader',
            options: {
              search: /\$([a-zA-Z0-9_\-]+)/g,
              replace: 'var(--$1)'
            }
          }
        ]
      },
      // 原有sass-loader等配置保持不变
    ]
  }
}

注意该方案可能误伤字符串、注释中的$符号，若项目中存在这类场景建议优先使用前两种方案。

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