postcss-custom-properties 不能完全解决 ie 对 css 变量的支持问题。它仅静态替换同文件内可分析的 var()，不支持嵌套变量、函数内变量、动态 js 注入及媒体查询中变量，ie 下仍需额外兼容处理。
IE 不支持 :root 中的 CSS 变量，PostCSS-custom-properties 能否真正解决？
不能完全解决。该插件只对静态、可推导的 var(--xxx) 做值替换，且要求变量必须在同一个 CSS 文件中定义并可静态分析。IE 下仍需配合其他手段补全兼容性。
常见错误现象：Uncaught SyntaxError: Invalid or unexpected token（当 CSS 变量出现在 IE 解析器不识别的位置时），或样式直接失效（变量未被替换，IE 忽略整条声明）。
- 变量必须用
:root或选择器显式声明，@custom-media或 JS 动态注入的变量无法被 PostCSS 捕获 - 不支持嵌套变量引用，例如
--color-primary: var(--brand-color);在旧版插件中可能解析失败 - 带单位的计算（如
calc(1em + var(--gap))）会被转为固定值，但若--gap本身是动态 JS 设置的，则转换后失去灵活性
PostCSS 配置里 preserve 和 importFrom 怎么设才有效？
preserve: false 是关键开关：设为 true 会保留原始 var() 语法，IE 依然报错；设为 false 才会移除原变量语句，仅留替换后的结果。
importFrom 用于跨文件共享变量，但仅支持 JSON、JS 或 CSS 文件，且路径必须是相对 PostCSS 配置文件的路径。
- 推荐用 JSON 方式集中管理：
importFrom: "./src/css/vars.json"，内容为{"variables": {"--primary": "#007bff"}} - 若变量分散在多个
:root块中，插件默认只读取当前文件最上方的定义，后续同名覆盖不会被识别 - 开启
exportTo: "./dist/vars.css"可生成一份降级后的纯 CSS 变量副本，供老项目手动引入
为什么转换后颜色/尺寸在 IE 里还是不对？
根本原因常是变量值含 CSS 函数或表达式，而 PostCSS-custom-properties 默认不解析 rgb()、hsl()、calc() 内部的 var() —— 它只替换顶层声明中的 var() 调用。
- 错误写法：
--text-color: rgb(var(--r), var(--g), var(--b));→ 插件不处理函数体内变量 - 正确写法：先定义完整颜色值，再引用：
--text-color: #333; color: var(--text-color); - 涉及
calc()时，确保被替换的变量是纯数字（如--gap: 8），然后写成margin: calc(var(--gap) * 1px)，插件才能转为margin: calc(8 * 1px) - 媒体查询中不能用变量：
@media (min-width: var(--breakpoint))→ PostCSS 不处理，IE 直接忽略整条 @media
PostCSS 转换完还需要手动处理哪些 IE 特有坑？
转换只是第一步。IE 对 CSS 语法容忍度低，生成的降级代码仍可能触发解析错误。
- 避免在变量值中使用
/分隔符（如--grid: "200px / 1fr"），IE 会把/当作除法运算符报错 - 字体族名含空格时，变量值必须加引号，且 PostCSS 不自动补引号：
--font-main: "Segoe UI", sans-serif→ 转换后需确认是否保留双引号 - IE9 不支持
rem单位降级，若变量用于font-size: var(--base-font-size)且值为1.125rem，需额外用postcss-pxtorem或 JS 处理 - 伪元素
::before的content值若来自变量（content: var(--icon)），IE 不支持，必须改用字体图标或背景图
变量不是“写一次到处跑”的银弹。IE 下真正可靠的方案，是把变量逻辑收口到构建层，生成确定值，并主动放弃那些依赖运行时响应的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
