PostCSS构建后CSS变量值不正确，主因是postcss-custom-properties未设preserve:false，导致IE等旧浏览器跳过含var()的整行声明而取initial值；变量须定义在:root且顺序正确、拼写一致、无嵌套引用或calc内使用。
PostCSS 构建后 CSS 变量值不正确，基本不是变量“写错了”，而是构建时变量没被识别、求值失败或被覆盖——postcss-custom-properties 默认不删 var()，IE/旧浏览器直接跳过整条声明；:root 里变量顺序错、拼写不一致、跨文件引用失效，都会让最终值变成 invalid 或继承值。
postcss-custom-properties 的 preserve: false 没设
这是最常被忽略的配置项。默认行为是保留原始 var(--x) 并追加降级值，例如：
color: #007bff; color: var(--primary);
IE11 解析到第二行就跳过整条声明，结果取 initial（常表现为透明背景或黑色文字）。必须显式关闭：
-
preserve: false→ 只留静态值，旧浏览器可用，但新浏览器失去动态能力 -
preserve: true或不写 → 新浏览器能用变量，旧浏览器仍失效 - Webpack/Vite 中确认该配置被实际读取，可在插件里加
console.log验证
:root 中变量定义顺序或作用域出问题
CSS 变量按解析顺序层叠，后声明覆盖前声明；且 var() 引用只认已解析过的变量，顺序反了就拿不到值：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
--base: #333; --primary: var(--base); - ❌ 错误：
--primary: var(--base); --base: #333;→--primary求值时--base尚未声明 - 多个
:root块并存（如 Bootstrap + 你自己的 theme.css）→ 后<link>的胜出 - 禁止在局部选择器里重定义
:root，比如.dark-theme :root { --text: #eee; }不会覆盖全局值
变量名拼写/大小写不一致或跨文件未导入
CSS 变量严格区分大小写和拼写，--Color-Primary 和 --color-primary 是两个变量；PostCSS 插件也无法跨文件解析 @import 进来的变量：
- 检查 DevTools → Computed →
<html>→ “Custom Properties” 区域，确认变量是否存在、值是否为invalid -
var(--bg, var(--theme-bg))非法：第二层var()缺少 fallback，整条声明失效；应写成var(--bg, var(--theme-bg, #fff)) - 所有变量应统一收口到单个
:root文件中，避免分散在多个 SCSS/Less 文件里靠@import拼接 - Webpack/Vite 若启用了 CSS Modules，类名哈希会破坏作用域识别，变量降级可能失效
构建流程中 Sass/Less 先于 PostCSS 运行，但变量未转成 -- 前缀
PostCSS 对 $sass-var 或 @less-var 完全无感，它只处理编译后的标准 CSS。如果你指望它“降级 Sass 变量”，方向就错了：
- Sass 层只负责计算，输出必须是
--css-var: #007bff这种原生语法 - 确保
postcss-loader紧跟css-loader之后，且在sass-loader之前（即：sass → css → postcss） - 若混用
@import和@use，Dart Sass 会退化为 legacy 模式，变量顺序彻底混乱 - Vite 用户注意：
postcss-nesting必须 v10+，且必须放在tailwindcss之前，否则@nest被提前重写
真正难调试的从来不是怎么写 var()，而是谁在什么时候、以什么顺序、把哪个值塞进了 :root —— 构建产物里看不见报错，但变量值早已在打包阶段被覆盖或丢弃。
