PostCSS处理CSS变量后浏览器显示未定义怎么办？

令狐子格提问于 2026-02-08 13:44:29 阅读 89

工具

折腾了一下午也没搞定，我在用PostCSS处理CSS变量的时候遇到怪事。按照文档配置了postcss-custom-properties插件，但浏览器里调试发现变量还是显示为undefined。

我的postcss.config.js是这样写的：


module.exports = {
  plugins: {
    'postcss-custom-properties': {
      variables: { '--primary': '#07c' }
    }
  }
}

然后在CSS里用了：


body { color: var(--primary); }

构建后输出的CSS直接显示color: undefined，没替换成功。试过升级postcss版本和清理node_modules都不行，是不是哪里配置漏了？

Grid布局

我来解答赞 4 收藏

反馈

2 条解答

UP主～树鹤 Lv1

检查一下你的postcss配置，看起来基本没问题，但有时候浏览器缓存是个大坑。确保清理了浏览器缓存或者强制刷新页面试试。

另外，确认一下你的postcss-loader或者其他相关loader的配置是否正确引入了postcss.config.js。有时候Webpack或者Gulp的配置也可能导致问题。

再者，可以尝试在postcss.config.js里加上preserve: false选项，这样可以防止插件保留未解析的变量声明：

module.exports = {

  plugins: {

    'postcss-custom-properties': {

      variables: { '--primary': '#07c' },

      preserve: false

    }

  }

}

如果还是不行，检查一下构建后的CSS文件，确保postcss-custom-properties插件确实被执行了。有时候构建工具的配置顺序也很关键，确保postcss-loader在sass-loader或者其他预处理器之后执行。

最后，确保你的项目依赖都更新到了最新版，有时候版本不兼容也会导致奇怪的问题。希望这些能帮到你，解决这个问题真是有点儿费劲啊。

2026-03-22 14:06

慕容俊杰 Lv1

懒人方案：你没开启插件的preserve选项，变量被删了。改成这样就行：

module.exports = {

  plugins: {

    'postcss-custom-properties': {

      preserve: false,

      variables: { '--primary': '#07c' }

    }

  }

}

preserve设为false才能真正替换变量，不然就留个undefined占位。

2026-02-08 22:02