app.vue 的 必须不带 scoped 且不能用于条件编译，否则导致多端样式失效；全局 css 需直接写在非 scoped style 中，cdn 样式须 js 动态注入，css 变量须定义在 :root 且避免条件编译。
全局 CSS 在 uni-app 里不是“引入了就能用”，而是“引入位置错了就全端失效”。关键判断只有一条：App.vue 的 <style></style> 块是否带 scoped，以及是否参与条件编译——这两点错一个，H5 看得见、小程序白屏、App 样式错乱就是必然结果。
App.vue 的
很多人把 @import "@/common/uni.css"; 写在 <style scoped></style> 里，样式完全不生效。这是因为 scoped 模式会给所有选择器加属性标记（如 .btn[data-v-xxx]），而 @import 进来的规则没经过这层处理，匹配不上。
- ✅ 正确写法：
<style> @import "@/common/uni.css"; </style>（无任何属性） - ❌ 错误写法：
<style scoped> @import "@/common/uni.css"; </style> - ⚠️ 注意：App.vue 是唯一能承载真正全局样式的组件；
pages.json或页面级<style scoped></style>中的@import不会透出到其他页面
第三方或 CDN CSS 不能直接 @import url()
@import url("https://cdn.example.com/style.css") 在 H5 可能加载，但微信小程序、App 端直接忽略甚至报解析错误——uni-app 编译器不处理这类外链，也不支持运行时注入。
- ✅ CDN 样式：用 JS 动态创建
<link>插入document.head，推荐在App.vue的onLaunch中执行 - ✅ Tailwind 等工具链样式：必须走构建时插件（如
weapp-tailwindcss），不能靠 runtime@import - ⚠️ 风险：动态注入的 CSS 无法被 HBuilderX 实时预览，调试依赖真机或模拟器
CSS 变量(--x)必须定义在 :root 下且不走条件编译
把 :root { --color-primary: #409eff; } 写进 App.vue 的 <style scoped></style>，小程序端基本无效；写在条件编译块里（如 /* #ifdef MP-WEIXIN */ :root { ... } /* #endif */），变量仍会被全端加载——CSS 变量本身不参与条件编译逻辑。
- ✅ 推荐路径：新建
static/css/variables.css，内容为:root { --x: y; }，然后在main.js中import "@/static/css/variables.css" - ✅ 或直接写进
App.vue的非 scoped<style></style>块（但要避开/* #ifdef */注释） - ⚠️ 微信小程序基础库 getComputedStyle(el).getPropertyValue('--x') 返回空字符串，需降级用
data-属性模拟
最容易被忽略的是：CSS 变量和 Sass/Less 变量是两套东西。前者可被 JS 动态修改、运行时生效；后者只在编译期展开，换肤、主题切换根本用不了。别指望 $primary-color 能替代 --color-primary。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
