PostCSS-custom-properties 能搞定IE的CSS变量兼容吗？真相有点扎心
开门见山地说，如果你指望仅靠 PostCSS-custom-properties 这一个插件，就能让 CSS 自定义属性在 IE 浏览器里完美运行，那恐怕要失望了。它的能力边界很明确：只做静态的、可推导的 var() 值替换。一旦遇到嵌套变量、函数内的变量、动态注入的变量，或者媒体查询里的变量，它就束手无策了。在 IE 环境下，你依然需要准备额外的兼容性方案。
IE 不支持 :root 中的 CSS 变量，PostCSS-custom-properties 能否真正解决？
答案是：不能完全解决。这个插件的工作原理，决定了它只能处理那些在同一个 CSS 文件里定义、并且能被静态分析出来的 var(--xxx)。所以，在 IE 下，样式直接失效或者控制台抛出 Uncaught SyntaxError: Invalid or unexpected token 这类错误，依然是家常便饭。
具体来说，有这么几个典型的“失灵”场景：
- 变量必须老老实实地写在
:root或选择器里。那些通过@custom-media定义的，或者用 Ja vaScript 动态注入的变量，PostCSS 根本“看”不见。 - 它也不支持嵌套引用。比如你写了
--color-primary: var(--brand-color);，指望它层层解析？在旧版插件里，这很可能就直接解析失败了。 - 涉及到带单位的计算就更麻烦了。像
calc(1em + var(--gap))这样的写法，插件会尝试把var(--gap)替换成一个固定值。但如果这个--gap本身是 Ja vaScript 动态设置的，那么转换之后，所有的灵活性也就荡然无存了。
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 里还是不对？
明明配置都对了，转换也跑了，怎么在 IE 里显示的颜色和尺寸还是不对劲？问题的根源，往往出在变量值本身包含了 CSS 函数或表达式。
PostCSS-custom-properties 默认只替换顶层声明中的 var() 调用，它不会去解析 rgb()、hsl()、calc() 这些函数内部的变量。
- 举个例子，这种写法就是错的：
--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 特有坑？
即便 PostCSS 转换顺利通过，也千万别以为万事大吉了。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插件或者 Ja vaScript 来进行处理。 - 伪元素
::before的content属性值如果来自变量（content: var(--icon)），IE 是不支持的。这种情况必须回退到使用字体图标或背景图片的方案。
说到底，CSS 变量在 IE 面前，从来就不是什么“写一次，到处跑”的银弹。在 IE 环境下真正可靠的策略，是把变量逻辑全部收口到构建工具层，生成确定无误的静态值，并且主动放弃那些依赖运行时动态计算的场景。这，或许才是与 IE 和平共处的务实之道。
