根本原因是ie11等旧浏览器静默丢弃含var(--x)的整条css声明，必须用postcss-custom-properties设preserve:false静态替换；变量须定义在:root且为纯常量，跨文件、calc()、js动态设置均无法降级。
PostCSS 处理 CSS 变量在旧版浏览器中失效，根本原因不是插件没运行，而是你配置没生效、变量不可静态求值，或构建产物里还残留 var(--x) —— IE11 和 Safari 12–14 遇到它就整条 CSS 声明静默丢弃，连后备值都不走。
postcss-custom-properties 的 preserve 配置漏设或设错
默认配置下插件只追加降级值，比如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 看到第二行直接跳过，最终用继承色或 initial（背景变透明、文字变黑）。必须显式写 preserve: true 才保留变量供现代浏览器动态使用；若只想要兼容旧浏览器且不依赖 JS 主题切换，得设 preserve: false 彻底删掉含 var() 的行。
-
preserve: true→ 输出双声明，新浏览器可用变量，旧浏览器用第一行 -
preserve: false→ 只输出静态值，旧浏览器能用，但 JS 动态改document.documentElement.style.setProperty('--c', 'red')就无效 - 不写
preserve或写成preserve: null→ 等同于false，但容易误判，建议显式声明
变量定义位置或值不符合静态替换前提
PostCSS 插件是编译期工具，只能处理构建时“一眼能看清”的变量：必须定义在 :root，值为纯常量，不能跨文件、不能嵌套、不能含 calc()。
- ✅ 安全写法：
:root { --primary: #007bff; --gap: 12px; } - ❌ 无法替换：
:root { --size: calc(1rem + 2px); --c: var(--base); } - ❌ 局部定义默认不处理：
.card { --pad: 1rem; }，除非配importFrom显式引入该文件 - ❌ 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析
插件未启用或执行顺序错误
postcss-custom-properties 不是 postcss-preset-env 的默认特性。CSS 自定义属性属于 stage 2，而 preset-env 默认只开 stage 3，漏配就会全程不生效。
- 必须手动开启：
features: { 'custom-properties': true } - 插件顺序必须在
autoprefixer之前，否则 autoprefixer 可能覆盖或干扰变量替换结果 - 如果同时用了
css-vars-ponyfill，它依赖原始var()存在；此时若配了preserve: false，ponyfill 就找不到变量可替换，双失效
构建后仍有 var(--x) 残留，说明降级根本没发生
运行构建后，直接打开产出的 CSS 文件，全局搜索 var(--。只要还有，就证明以下至少一点成立：
- 变量定义在 JS 里（如
document.documentElement.style.setProperty('--c', 'red')），PostCSS 看不见 - 变量值含嵌套引用（
--c: var(--base)）或函数（linear-gradient()），插件跳过不处理 - 变量定义在另一个 CSS 文件，但没通过
importFrom或@import显式关联 - 路径配置错误，比如
importFrom: './src/vars.css'但文件实际在./styles/vars.css
真正有效的兜底从来不是靠“试试看”，而是构建后亲手检查输出是否干净，再配合 no-cssvars 类做运行时 fallback —— 因为 PostCSS 替换不了的东西，JS 至少还能补一手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
