PostCSS插件处理CSS变量时不起作用怎么办？

Newb.思捷提问于 2026-01-26 23:19:28 阅读 33

工具

我在用PostCSS处理CSS变量时遇到了问题，明明配置了postcss-custom-properties插件，但页面里的变量还是没被解析。比如下面这个HTML里的–primary-color变量：


<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: #3498db;
    }
    .btn {
      background: var(--primary-color);
    }
  </style>
  <link rel="stylesheet" href="dist/styles.css" rel="external nofollow" >
</head>
<body>
  <button class="btn">点击我</button>
</body>
</html>

我已经在postcss.config.js里同时用了postcss-nested和postcss-custom-properties，但按钮背景还是透明的。尝试过调整插件顺序、重启构建工具都没用，控制台也没有报错，到底是哪里配置错了呢？

我来解答赞 6 收藏

反馈

2 条解答

码农松奇 Lv1

你得确保 postcss-custom-properties 插件的配置里加上了 preserve: false，不然它默认会保留原始的 CSS 变量。像这样：

module.exports = {

  plugins: [

    require('postcss-nested'),

    require('postcss-custom-properties')({

      preserve: false

    })

  ]

};

另外检查下你的构建工具是不是真的处理了 HTML 里的内联样式，如果没处理，变量当然不会被解析。应该能用。

2026-02-18 14:08

Code°秀丽 Lv1

问题出在插件顺序上，PostCSS对插件的执行顺序很敏感。你得把 postcss-custom-properties 放在最前面，不然它可能处理不到变量。

直接用这个 postcss.config.js：

module.exports = {

  plugins: [

    require('postcss-custom-properties'), // 必须放第一

    require('postcss-nested'),

    require('autoprefixer')

  ]

}

另外再确认下你的构建工具是否正确加载了PostCSS配置，有时候Webpack之类的需要手动指定。试试上面的顺序，应该就能正常解析变量了。

如果还是不行，检查下 dist/styles.css 文件里有没有被处理过的样式内容，说不定是输出环节出了问题。

2026-01-28 19:01