如何在微信小程序中引入全局CSS变量_在app.wxss中定义并引用-css教程-PHP中文网

微信小程序不支持 app.wxss 中的 css 变量跨文件继承，必须在每个页面或组件的 .wxss 中通过 @import "/styles/vars.wxss" 显式引入变量文件，并为 var() 提供回退值以兼容低版本基础库。

如何在微信小程序中引入全局css变量_在app.wxss中定义并引用

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，那个页面或组件就彻底失联。