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

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

工具

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

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

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

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

我来解答赞 7 收藏

反馈

2 条解答

诸葛新玲 Lv1

啊，这个问题我踩过坑！是PostCSS和Sass变量处理顺序的问题。当PostCSS先运行时，它会傻乎乎地把CSS变量当成原生变量处理，而这时候Sass变量还没被编译。

更好的写法应该是这样调整webpack配置顺序：

{

  test: /.scss$/,

  use: [

    'style-loader',

    'css-loader',

    'postcss-loader',  // 这个要放后面

    'sass-loader'      // 这个要先处理

  ]

}

重点来了：
1. Sass-loader要先处理变量，把它们编译成实际值
2. PostCSS再去处理编译后的CSS变量
3. 记得检查你的_scss文件是否被正确引入，有时候路径写错也会报变量未定义

如果还不行，试试在Sass里用插值语法强制编译：
background: #{ $primary }

（小声bb：CSS变量和Sass变量混用真是坑爹，我上次调试到凌晨两点...）

2026-03-05 23:01

长孙钰曦 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