CSS变量必须定义在:root或html下才全局生效，App.vue中scoped样式会使:root失效，应统一放入static/css/variables.css并main.js导入；calc()和@keyframes中变量需规避；JS动态修改推荐setTimeout后setProperty或data-theme切换。
必须定义在 :root 或 html 下才能真正全局生效，其他写法在小程序端大概率失效。
为什么 App.vue 的 <style scoped> 里写 :root 没用？
scoped 属性会让 Vue 编译器给样式加属性选择器（如 data-v-xxx），导致 :root 被隔离成 :root[data-v-xxx] —— 这就不是真正的根元素了。微信、支付宝等小程序平台会直接忽略这种伪类，H5 端可能侥幸生效，但多端一致性崩塌。
- 正确做法：把所有 CSS 变量统一放进
static/css/variables.css，然后在main.js中import '@/static/css/variables.css' - 绝对不要在
App.vue的<style>块里写:root { --x: y }，哪怕它没加scoped - 如果非要在
App.vue里放，必须用非 scoped 的<style>块，且确保它在最外层、无条件编译包裹
var(--color) 在 calc() 或 @keyframes 里为啥不生效？
小程序平台（尤其是微信基础库 < 2.25.0）对 CSS 变量的运行时解析能力有限：不支持在 calc() 中嵌套多层变量（比如 calc(var(--a) + var(--b))），也不支持在 @keyframes 中引用变量。H5 和 App 端通常没问题，但一写就跨端报错或表现不一致。
- 规避方案：把需要参与计算的值提前在 JS 里算好，再用
setProperty注入单一变量（如--height: 44px） - 动画场景优先用 class 切换预设 keyframes，别依赖变量驱动动画值
- 检查基础库版本：微信小程序需 ≥ 2.25.0 才能较稳定读取
getComputedStyle(el).getPropertyValue('--x')
怎么让 JS 动态改变量并确保子组件立刻响应？
直接调 document.documentElement.style.setProperty('--color', '#fff') 是最稳的，但时机和作用域容易出错——mounted 钩子不一定够，尤其在 onLaunch 后立即操作时，document 可能还没可写。
立即学习“前端免费学习笔记（深入）”；
- 推荐时机：在
App.vue的onLaunch或页面onReady后加setTimeout(() => {}, 0)，确保 DOM 就绪 - 避免逐个 setProperty：主题切换时用
document.documentElement.setAttribute('data-theme', 'dark')+ CSS 层级控制更可靠 - Vue 响应式无法监听 CSS 变量变化，别指望
watch到var(--x)的变更；视图更新得靠 class 切换或强制重绘（慎用forceUpdate）
真正难的不是写对一行 var(--x)，而是搞清变量在哪一级注入、被哪一层覆盖、在哪个平台被静默忽略——尤其当 uni-app x 自带的 --uni-safe-area-inset-bottom 和你自定义的 --footer-height 同时存在时，顺序和层级稍有差池，tabbar 就会吃掉你的按钮。
