微信小程序不支持 app.wxss 中的 CSS 变量跨文件继承，必须在每个页面或组件的 .wxss 中通过 @import "/styles/vars.wxss" 显式引入变量文件，并为 var() 提供回退值以兼容低版本基础库。
app.wxss 中定义的 CSS 变量无法被页面 wxss 文件直接继承
微信小程序的样式系统不支持 CSS 变量（:root 或 html 级全局作用域）跨文件传播。即使你在 app.wxss 里写了 :root { --primary-color: #1aad19; }，所有 page 的 index.wxss、user.wxss 都**不会自动继承这些变量**——编译时各 wxss 是隔离处理的，:root 在每个文件里只代表其自身作用域根节点（即当前文件的顶层容器），不是全局共享上下文。
必须在每个页面 wxss 文件中重复 @import 或显式声明
要让某个页面能用上统一的 CSS 变量，有且仅有两种可靠方式：
- 在每个页面的
.wxss文件顶部加@import "/app.wxss";（但注意：app.wxss本身不能包含@import，否则编译报错Cannot resolve module） - 把变量抽成独立文件（如
/styles/vars.wxss），然后在app.wxss和所有页面.wxss中都@import "/styles/vars.wxss"; - 变量定义必须写在
:root里才有效，写在其他选择器下（如page、view）会导致作用域受限，子元素无法通过var(--x)访问
推荐第二种：新建 /styles/vars.wxss，内容为：
:root {
--primary-color: #1aad19;
--bg-color: #f5f5f5;
}
使用时注意 var() 回退值和编译兼容性
微信开发者工具基础库 2.25.0+ 才完整支持 var()，低版本会直接忽略该声明导致样式失效。务必加回退值：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
color: var(--primary-color);（旧版显示为 transparent） - 正确写法：
color: var(--primary-color, #1aad19);（第二参数是兜底色） - 不能在
@keyframes或@media内部动态计算变量，它们在小程序中不支持嵌套var() - 变量名区分大小写，
--PrimaryColor和--primaryColor是两个不同变量
组件中无法直接访问页面引入的 CSS 变量
自定义组件的 component.wxss 是独立作用域，即使页面已 @import 变量文件，组件内部也拿不到——除非也在组件的 .wxss 里同样 @import。更麻烦的是：如果组件被多个页面复用，而各页面引入路径不一致（比如有的用相对路径 @import "../styles/vars.wxss"，有的用绝对路径），就会编译失败。
所以实际项目中，建议把 vars.wxss 放在 /styles/ 这种稳定路径，并在所有需要的地方统一用绝对路径 @import "/styles/vars.wxss";。别图省事只在 app.wxss 里写一遍就以为万事大吉。
真正容易被忽略的是：CSS 变量不是“定义一次，处处生效”的魔法，它依赖每个样式文件主动参与导入和作用域声明。漏掉一个 @import，那个页面或组件就彻底失联。
