Babel CLI 转换后 CSS 变量失效了？

程序猿伊糖提问于 2026-03-14 10:18:21 阅读 3

工具

我用 Babel CLI 编译项目时，发现原本能正常工作的 CSS 自定义变量突然不生效了，是不是 Babel 动了我的 CSS？我明明只配置了 JS 的 presets 啊。

这是我的一段 CSS 代码：

:root {
  --main-color: #3498db;
}

.button {
  background: var(--main-color);
}

编译后页面上颜色变成透明了，控制台也没报错，有点懵……

Babel CLI工具

我来解答赞 2 收藏

反馈

1 条解答

书生シ佳润 Lv1

兄弟，Babel 真的不动你的 CSS。Babel 是 JavaScript 编译器，它只关心 .js/.jsx/.ts 这些文件，不会闲到去改 CSS 的。

你这种情况，我猜大概率是项目里用了 Webpack 或者 Vite 之类的构建工具，然后 CSS 经过 css-loader 或者 postcss-loader 处理的时候出了问题。

你说编译后颜色变透明了，我建议你可以先看看编译后的 CSS 文件长什么样，看看 --main-color 还在不在。

如果编译后 CSS 变量直接被删了或者变成了空值，那可能是这几个原因：

一是 PostCSS 的配置问题，有些项目用了 autoprefixer 或者其他插件，可能会误伤 CSS 变量，不过这种情况比较少。

二是你可能用了什么 CSS 压缩工具，比如 cssnano，如果配置不当是可能把变量给我干掉的。

三是最常见的——你用的构建工具版本有 bug，或者配置里写了什么奇怪的东西。

你可以先检查一下你的构建配置文件，比如 webpack.config.js 或者 postcss.config.js，看看有没有处理 CSS 变量的插件配置。

还有，你确定 CSS 文件是被正确引入的吗？有时候加载失败页面也会显示透明，但控制台没报错。

你用的什么构建工具？把相关配置文件贴出来看看，我帮你定位一下到底是谁动了你的 CSS 变量。

2026-03-14 11:00