PostCSS 的 postcss-variables 插件为啥不生效？

程序猿亚飞提问于 2026-02-28 19:47:21 阅读 15

工具

我用 Vue 3 + Vite 搭的项目，想用 postcss-variables 插件把 CSS 自定义变量转成静态值，但编译后还是原样输出，根本没替换。是不是配置哪里错了？

我的组件代码是这样的：

<template>
  <div class="box">测试</div>
</template>

<style scoped>
:root {
  --color-primary: #3498db;
}
.box {
  color: var(--color-primary);
}
</style>

postcss.config.js 里也加了 require(‘postcss-variables’)，但生成的 CSS 里还是 color: var(--color-primary)，没变成实际颜色值。这插件现在是不是不维护了？还是我漏了什么步骤？

我来解答赞 3 收藏

反馈

1 条解答

W″海霞 Lv1

你这问题我之前也踩过坑，核心问题不在插件本身，而是你把变量定义放在了

这样更清晰，变量定义在全局，使用在局部，postcss-variables 才能正确识别并替换。

另外说一句，postcss-variables 这插件确实有点年头了，如果你只是想在构建时把变量转成静态值，其实可以考虑用 postcss-custom-properties，它是 postcss-preset-env 的一部分，维护得更活跃，配置也更简单：

// postcss.config.js

module.exports = {

  plugins: {

    'postcss-custom-properties': {}

  }

}

不过无论用哪个插件，变量定义一定要放在能被正确解析的地方，scoped 里定义 :root 本身就是个逻辑矛盾。

2026-03-01 07:00