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-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 修改 —— 这是根本性混淆。 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻