PostCSS处理CSS变量时，为什么预处理器变量会被替换成初始值？

Top丶子轩提问于 2026-02-17 16:27:24 阅读 17

工具

在用PostCSS处理CSS变量时遇到了奇怪的问题：--primary-color被替换成初始值#00f了，但代码里明明写的是Sass变量$primary，这是怎么回事？

尝试过调整postcss-loader和sass-loader的顺序，但编译后还是出现：

.button {
  background: #00f; /* 应该是$primary的值 */
}

错误提示说Unknown Sass variable "$primary"，但变量明明在_scss文件里定义了…

我来解答赞 2 收藏

反馈

1 条解答

长孙钰曦 Lv1

这个问题其实是Sass和PostCSS的执行顺序以及作用域导致的。性能上来说，构建工具链的loader顺序非常关键。

简单说，Sass变量$primary是在Sass编译阶段解析的，而CSS变量--primary-color是PostCSS处理的。如果你在代码里写了类似这样的东西：

:root {

  --primary-color: $primary;

}

那问题就出在这里：PostCSS根本不认识$primary这个Sass变量，它会直接把--primary-color当成普通的CSS变量处理，最后用初始值#00f填充。

解决办法有两个，推荐第一个，性能更好：

第一种方法是别混用这两种变量系统，统一用Sass变量就够了：

$primary: #3498db;



.button {

  background: $primary;

}

第二种方法是确实需要CSS变量的话，得确保Sass先编译完：

// webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /.scss$/,

        use: [

          'style-loader',

          'css-loader',

          'postcss-loader', // 先让PostCSS处理

          'sass-loader'     // Sass放最后

        ]

      }

    ]

  }

};

但说实话，这种写法性能开销更大，因为多了一层变量解析。我建议直接用Sass变量，除非你的项目真需要CSS变量做动态切换主题这种场景。

2026-02-17 17:04