PostCSS-custom-properties插件不能自动推导变量值，仅做已定义变量的替换；必须在:root或指定作用域明确定义--color-primary等变量，且区分大小写，不支持嵌套计算。
PostCSS-custom-properties插件到底能不能把--color-primary转成color: #007bff？
不能直接转成内联值，它只做「变量替换」，不是「值推导」。你得自己提供:root里定义的变量，插件才敢替；没定义的--missing-var会原样保留或报错（取决于preserve配置），不会猜值。
常见错误现象：background: var(--bg);编译后还是background: var(--bg);——大概率是:root没写--bg，或者写了但没被插件读到（比如放在@import后的文件里）。
- 必须在
:root或选择器作用域内明确定义变量，例如:root { --color-primary: #007bff; } - 变量名区分大小写，
--Color-Primary和--color-primary是两个变量 - 不支持嵌套计算，
var(--size) * 2这种表达式不会被处理
为什么postcss-custom-properties加了preserve: false还是留着var()？
因为插件默认只处理「顶层:root声明」，如果你把变量写在.theme-dark { --color-text: #333; }里，它默认不进作用域分析——除非你开importFrom或手动传入variables对象。
使用场景：主题切换类项目常把变量按主题拆文件，这时preserve: false本身没用，关键得让插件「看见」所有变量源。
立即学习“前端免费学习笔记（深入）”；
- 用
importFrom从JSON/JS/CSS文件加载变量：importFrom: ['src/vars.css', 'src/theme-light.json'] - 直接传对象：
variables: { '--color-text': '#333', '--spacing-xs': '4px' } -
preserve: false仅对「已知变量」生效；未知变量仍保留var()，避免样式断裂
IE11兼容时fallback怎么写才不被忽略？
必须写在var()**同一声明里**，且顺序不能错：先写降级值，再写var()。浏览器从左到右解析，遇到不认识的函数就跳过，靠前面的值兜底。
错误写法：color: var(--color-text); color: #333;——IE11会执行第二行，但现代浏览器也会覆盖第一行，失去变量意义。
- 正确 fallback：
color: #333; color: var(--color-text); - 支持多层 fallback：
color: #333; color: var(--color-text-alt, #666); color: var(--color-text); - 注意：PostCSS插件**不生成**fallback，那是你手写或用
postcss-custom-properties-fallback这类辅助插件干的事
和postcss-css-variables比，该选哪个？
postcss-custom-properties是官方推荐、持续维护的方案；postcss-css-variables早已归档停更，且不支持inherit作用域、!important变量声明等现代行为。
性能影响很小，但兼容性差异明显：前者支持var(--x, var(--y))嵌套回退，后者在复杂嵌套时容易漏替换；前者能正确处理@media内变量重定义，后者常失效。
- 别碰
postcss-css-variables，npm上搜到也别装 - 如果项目还要跑IE9–10，需额外加
postcss-custom-properties@8.x（新版只保IE11+） - Webpack用户注意：
postcss-loader配置里插件顺序很重要，它必须在autoprefixer之前运行
变量作用域、fallback位置、插件版本匹配——这三个点错一个，就可能上线后发现按钮突然变黑或者文字消失。真要兼容旧浏览器，别信“一键转换”，得盯着每条声明看它到底替没替上。
