uni-app怎么全局引入CSS变量 uni-app样式复用配置【配置】

在 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 的 style 默认是 scoped直接写变量不会透出到子组件。把所有 CSS 变量统一写进 static/css/variables.css然后在 main.js 中用 import /static/css/variables.css 引入注意不是 /App.vue别在 App.vue style 里写 :root { --x: y } —— H5 端可能生效但小程序端会被编译器忽略或隔离如果用 Sass/Less变量$color-primary不等于 CSS 变量不能被 JS 读取或运行时修改二者用途不同别混用uni-app 多端兼容 CSS 变量的写法坑点小程序平台微信、支付宝等对 CSS 变量的支持有隐式限制不支持在 keyframes 里使用、不支持在 calc() 中嵌套多层变量、部分安卓 WebView 版本会忽略动态设置的 style.setProperty。H5 和小程序都要用变量定义必须在 style 标签中且无 scoped推荐放 App.vue 的非 scoped style 块里style 不带属性微信小程序基础库低于 2.25.0 时getComputedStyle(el).getPropertyValue(--x) 返回空字符串需降级用 data-attribute 模拟不要在 uni-app 的条件编译块里写变量定义如 // #ifdef MP-WEIXINCSS 变量不走条件编译逻辑会被全端加载如何让 JS 动态改全局 CSS 变量并实时生效直接操作 document.documentElement.style.setProperty(--color-bg, #fff) 是最可靠方式但要注意触发时机和作用域。必须等 DOM 加载完成再执行mounted 钩子不一定够 —— 推荐在 onLaunchApp.vue或 onReady 后加 setTimeout(() {}, 0) 确保 document 可写主题切换时避免逐个 setProperty用 document.documentElement.setAttribute(data-theme, dark) CSS 层级控制更稳定Vue 响应式无法监听 CSS 变量变化JS 改了变量后想驱动视图更新得配合 class 切换或 forceUpdate非常规手段慎用uni-app 中 CSS 变量和预处理器变量怎么分工很多人试图用 Sass 变量替代 CSS 变量来“复用样式”结果发现换肤失败、无法 runtime 修改 —— 这是根本性混淆。 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻