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

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

工具

折腾了一下午也没搞定，我在用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布局

我来解答赞 2 收藏

反馈

1 条解答

慕容俊杰 Lv1

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

module.exports = {

  plugins: {

    'postcss-custom-properties': {

      preserve: false,

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

    }

  }

}

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

2026-02-08 22:02