在 uni-app 中全局生效 CSS 变量需定义在 :root 或 html 下，推荐将变量统一写入 static/css/variables.css 并在 main.js 中导入；避免在 App.vue 的 scoped style 中定义，且不可与 Sass/Less 变量混淆——前者运行时可动态修改，后者仅编译期生效。
uni-app 里怎么在全局生效 CSS 变量
CSS 变量（--color-primary 这类）必须定义在 :root 或 html 作用域下才能真正“全局”。uni-app 的 App.vue 的 默认是 scoped，直接写变量不会透出到子组件。
- 把所有 CSS 变量统一写进
static/css/variables.css，然后在main.js中用import '@/static/css/variables.css'引入（注意不是@/App.vue） - 别在
App.vue里写:root { --x: y }—— H5 端可能生效，但小程序端会被编译器忽略或隔离 - 如果用 Sass/Less，变量（
$color-primary）不等于 CSS 变量，不能被 JS 读取或运行时修改，二者用途不同，别混用
uni-app 多端兼容 CSS 变量的写法坑点
小程序平台（微信、支付宝等）对 CSS 变量的支持有隐式限制：不支持在 @keyframes 里使用、不支持在 calc() 中嵌套多层变量、部分安卓 WebView 版本会忽略动态设置的 style.setProperty。
- H5 和小程序都要用：变量定义必须在
标签中且无scoped，推荐放App.vue的非 scoped style 块里（不带属性） - 微信小程序基础库低于 2.25.0 时，
getComputedStyle(el).getPropertyValue('--x')返回空字符串，需降级用 data-attribute 模拟 - 不要在
uni-app的条件编译块里写变量定义（如// #ifdef MP-WEIXIN），CSS 变量不走条件编译逻辑，会被全端加载
如何让 JS 动态改全局 CSS 变量并实时生效
直接操作 document.documentElement.style.setProperty('--color-bg', '#fff') 是最可靠方式，但要注意触发时机和作用域。
- 必须等 DOM 加载完成再执行，
mounted钩子不一定够 —— 推荐在onLaunch（App.vue）或onReady后加setTimeout(() => {}, 0)确保 document 可写 - 主题切换时，避免逐个 setProperty，用
document.documentElement.setAttribute('data-theme', 'dark')+ CSS 层级控制更稳定 - Vue 响应式无法监听 CSS 变量变化，JS 改了变量后，想驱动视图更新得配合 class 切换或
forceUpdate（非常规手段，慎用）
uni-app 中 CSS 变量和预处理器变量怎么分工
很多人试图用 Sass 变量替代 CSS 变量来“复用样式”，结果发现换肤失败、无法 runtime 修改 —— 这是根本性混淆。
- Sass 变量（
$primary-color）只在编译期起作用，输出的是静态 CSS，适合固定主题、构建时确定的值 - CSS 变量（
--primary-color）在运行时生效，可被 JS 读写、支持继承、能配合prefers-color-scheme媒体查询 - 最佳实践：Sass 负责布局/结构类复用（如
$gap-sm），CSS 变量负责视觉主题类配置（如--text-color），两者共存不冲突
真正麻烦的不是怎么写，而是搞清哪些变量需要 runtime 控制、哪些只是编译期缩写 —— 混在一起，后期换肤或灰度发布时就只能重写样式层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
