如何在PostCSS中自动编译并转换CSS变量-css教程-PHP中文网

postcss-custom-properties 默认不生效，因 preserve: true 保留 var() 导致 ie 静默丢弃整条声明；必须设 preserve: false 且插件置于 autoprefixer 前，变量须定义在 :root 中、值为静态常量，并人工验证输出无残留 var()。

如何在postcss中自动编译并转换css变量

PostCSS 本身不处理 CSS 变量，必须靠 postcss-custom-properties 插件在构建时静态替换，且默认配置下根本不会生效——它默认保留 var() 行，IE 会直接跳过整条声明。

为什么 `postcss-custom-properties` 默认不 work

插件默认行为是生成双声明：background: #007bff; background: var(--primary);。这看似稳妥，但 IE11 及更早版本遇到无法识别的 var() 会静默丢弃整条 background 声明，最终取父级或初始值（比如 background: transparent），按钮变透明、文字变黑、布局塌陷都是常态。

真正起效的前提只有一个：preserve: false。它强制插件移除所有 var() 调用，只留下降级后的静态值。

Webpack/Vite 项目中，postcss-custom-properties 必须放在 autoprefixer 之前，否则 autoprefixer 可能干扰属性顺序或压缩逻辑
若同时引入 css-vars-ponyfill 运行时方案，二者冲突：ponyfill 依赖原始 var() 存在，而 preserve: false 把它删光了
变量定义必须在同一个 CSS 文件中，且优先出现在使用位置之前；跨文件、JS 注入、@import 引入的变量均不可见

`:root` 是唯一安全的变量作用域

插件只解析 :root 下定义的变量，其他位置如 .card { --pad: 1rem; } 或媒体查询内定义的 :root { --gap: 16px; } 默认不处理——它不分析 DOM 结构，也不回溯解析 @media 块外的上下文。

值也必须是静态常量：--color: red; ✅，--size: calc(1rem + 2px); ❌，--c: var(--base); ❌，--bg: linear-gradient(...); ❌。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

局部变量若真需降级，得显式配置 importFrom 指向对应文件，但维护成本高，不推荐
CSS Modules 类名哈希后，:root 外的变量基本无法被插件捕获，全局变量务必收口到 :root
媒体查询内的变量建议提至顶层 :root，并用 JS 或构建时条件变量区分不同断点值

构建后必须人工验证输出 CSS 是否干净

跑完构建，打开产出的 .css 文件，全局搜索 var(--。只要还有残留，说明要么变量定义位置不对，要么值含动态表达式，要么插件根本没生效。

别信 “已配置插件” 就万事大吉；检查 postcss.config.js 中插件是否被 filter(Boolean) 过滤掉（常见于环境判断逻辑）
若用了 cssnano，确认 discardDuplicates: false，否则两行同名属性（如 color: #333; color: var(--text);）可能被误删
calc(100% - var(--gap)) 这类写法在 IE 中不是 “var() 不生效”，而是整个 calc() 被判为无效值，必须手动拆解为 width: 90%; 等静态值

`@supports` 和 `no-cssvars` 类才是真实兜底

@supports (color: var(--x)) 在 IE11 中不被识别，整条规则被忽略，不能单独用于降级。它只适合现代浏览器的增强逻辑。

JS 检测必须用 CSS.supports('color', 'var(--_)')，而非 CSS.supports('--_')（后者在 IE 报 TypeError）。

最可靠方式：<script>if (!CSS.supports('color', 'var(--t)')) document.documentElement.classList.add('no-cssvars');</script>
CSS 中写两套：.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; }
千万别用覆盖写法：background: #007bff; background: var(--primary); —— IE 会把第二行当无效，然后回退到父级 background，结果不可控

真正的难点不在配置插件，而在约束变量定义方式、拆解动态表达式、以及确保构建链路每个环节都不悄悄“加回来”一个 var()。