小程序wxss引擎底层不解析var(--x)语法，会静默忽略--var声明和var()调用，非兼容性问题而是硬性限制；必须通过条件编译硬编码值或class切换实现主题适配。
小程序 WebView 不支持 CSS 自定义属性（--var）是硬性限制
微信小程序的 WXSS 引擎从底层就不解析 var(--x) 语法，不是兼容性问题，而是直接忽略。你写的 --color: red; 和 color: var(--color); 在开发者工具或真机上都会被静默丢弃，控制台也不会报错——它根本没进样式计算流程。
var() 在小程序中失效的典型现象
常见表现包括：
- 页面颜色、间距、圆角等批量失配，但 H5 和 App 端完全正常
- 使用了
var()的组件在模拟器里显示为默认色（如黑色文字、无背景），且无法通过「检查元素」看到该属性被应用 - 哪怕只在局部作用域（如
:root或 class 内）定义变量，小程序仍不识别 - 搭配
@media或@supports使用时，整个规则块可能被跳过（因为解析器卡在var()）
替代方案：用条件编译 + 预设值硬编码
不能靠运行时降级，必须在构建阶段剥离变量逻辑。uni-app 提供的条件编译是最稳妥路径：
- 把主题色、字号等抽成 JS 常量，在
main.js或uni.scss中用// #ifdef MP-WEIXIN分支写死值 - 避免在 WXSS 文件里出现任何
var()，改用color: #409eff;这类直写值 - 若需动态换肤，改用 class 切换（如
.theme-dark .text）+ 条件编译生成多套样式文件 - 不要试图用 JS 动态设置
style.setProperty—— 小程序 DOM 不暴露CSSStyleDeclaration接口
为什么 autoprefixer 或 postcss-preset-env 也救不了 var()
这类工具只能处理语法转换（如 flex → -webkit-flex），但 var() 是 CSS 变量机制，属于语言特性层面缺失。WXSS 解析器连 var() 的 token 都不认，更不会触发后续计算。即便你用 PostCSS 把 var(--c) 替换成 #fff，也得确保替换发生在 uni-app 编译 WXSS 之前，而官方构建链路默认不支持对 WXSS 做 PostCSS 处理。
真正容易被忽略的是：很多人在 H5 端用 var() 写得顺手，一并复制到 common.scss 里，结果所有小程序平台全挂——这不是漏加前缀，是根本没走通语法树解析这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
