Babel CLI 转换后为啥我的 CSS 变量失效了？

Top丶露露提问于 2026-03-22 11:16:19 阅读 33

工具

我用 Babel CLI 编译项目时，发现编译后的 CSS 自定义属性（变量）没生效，但源码里明明写对了。是不是 Babel 会处理 CSS 文件？可我只配置了 JS 啊。

这是我在组件里写的样式：

:root {
  --primary-color: #3b82f6;
}

.button {
  background: var(--primary-color);
  color: white;
  padding: 8px 16px;
}

结果打包后页面上按钮背景变成透明了，F12 看样式里 var(–primary-color) 还在，但浏览器没解析成实际颜色。这跟 Babel 有关系吗？

我来解答赞 4 收藏

反馈

1 条解答

令狐可欣 Lv1

Babel CLI 默认不处理 CSS 文件，所以你得自己配置一个工具来处理 CSS 变量。直接这样，安装 postcss-cli 和 postcss-preset-env，然后配置一个 postcss.config.js 文件：

module.exports = {

  plugins: [

    require('postcss-preset-env')({ stage: 1 })

  ]

}

最后用 postcss-cli 来编译 CSS 文件。

2026-03-22 11:28