老版本浏览器静默忽略css变量，postcss需配置customproperties({preserve: true})并配合postcss-preset-env开启customproperties，避免calc()嵌套var()，局部变量需提至:root或改用sass。
老版本浏览器直接忽略 :root 里的 CSS 变量
Chrome 49、Firefox 31、Safari 9.1 之前，var(--color) 会被当作无效声明直接丢弃，连 fallback 都不走。不是报错，是静默失效——这比报错更难排查。
常见错误现象：background: var(--primary, #007bff) 在 IE11 或旧版 Safari 里渲染成透明背景（因为整条声明被丢弃），而不是回退到 #007bff。
- PostCSS 本身不自动启用变量转换，必须显式配置插件
-
postcss-custom-properties是核心插件，但默认只处理:root和顶层规则，嵌套中的var()不会转换（比如.btn:hover { color: var(--hover-color); }） - 如果用了
postcss-preset-env，注意它默认开启的是 stage 3 特性，而 CSS 自定义属性属于 stage 2，需手动打开customProperties: true
PostCSS 配置必须启用 preserve 选项才能保留原变量
很多团队配完 postcss-custom-properties 发现旧浏览器还是没颜色，结果发现是漏了 preserve: true。这个选项决定是否在输出中保留原始 var() 声明——不保留，就只剩转换后的值；保留，才能让新浏览器用变量、旧浏览器用静态值。
典型错误配置：{ preserve: false } 或干脆不写，导致输出只有 color: #007bff，没了 color: var(--primary)，新浏览器就失去动态能力。
- 正确写法：
customProperties({ preserve: true }) - 如果项目要支持 CSS-in-JS 或 runtime 主题切换，
preserve: true是刚需，否则变量无法被 JS 修改 -
importFrom可指定变量源文件（如./src/vars.css），避免重复定义，但路径必须存在且被 PostCSS 正确解析
IE11 下 calc() + var() 组合会彻底失效
像 width: calc(100% - var(--gap)) 这种写法，在 IE11 里不仅 var() 不生效，整个 calc() 表达式都会被忽略。PostCSS 默认不处理这种嵌套，需要额外插件或手动拆解。
这不是 PostCSS 漏转，而是 IE11 的 parser 根本不识别含 var() 的 calc()，连 fallback 机制都进不去。
-
postcss-custom-properties对calc()内的var()支持有限，建议避免在calc()中直接用变量 - 可行替代：
--gap: 12px→ 提前算好值，用width: calc(100% - 12px)，或用 CSS-in-JS 动态注入 - 如果必须动态，可借助
postcss-calc配合postcss-custom-properties，但顺序很重要：先custom-properties，再calc，否则calc()看不到已替换的数值
变量作用域和继承在转换后可能意外丢失
CSS 变量天然支持继承和局部作用域，比如 .card { --color: red; } .card p { color: var(--color); }。但 PostCSS 转换时默认只展开 :root 和同级变量，子选择器里的 var() 若依赖父级定义，大概率转不出来。
表现就是：开发时看着正常，构建后子元素颜色变默认值——因为 PostCSS 没找到父级定义的变量，按未定义处理，fallback 又没写，最终变成 color: initial。
- 插件默认不模拟运行时作用域，只做静态查找。局部变量需显式
importFrom或全部提至:root - 如果业务强依赖局部变量，建议改用预处理器（如 Sass）变量，或接受部分旧浏览器不支持该交互
- 可通过
postcss-reporter查看警告，比如Unable to parse variable '--color' in '.card p'，这是最直接的信号
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
