全局CSS在uni-app中需避开scoped隔离、条件编译误用、平台单位陷阱三关，否则导致多端表现不一致；@import须置于非scoped style中；第三方CSS需动态注入或构建插件；单位混用易出错；CSS变量须定义在:root并外部引入。
全局 CSS 样式在 uni-app 里不是“引入了就生效”，而是必须避开 scoped 隔离、条件编译误用、平台单位陷阱这三道关卡，否则 H5 正常、小程序白屏、App 错位就是常态。
为什么 @import 写在 <style scoped> 里完全不生效
Vue 的 scoped 模式会给所有选择器自动加属性标识（如 .btn[data-v-xxx]），但 @import 进来的 CSS 规则没经过这层处理，匹配不上就被过滤掉。这不是加载失败，是匹配失效。
- ❌ 错误写法：
<style scoped> @import "@/common/uni.css"; </style> - ✅ 正确位置：只放在
<style>（无scoped属性）块中，推荐统一写在App.vue的顶层<style> - ⚠️ 注意：
pages.json和组件内<style scoped>完全不支持任何条件编译语法，别在这儿试/* #ifdef */
如何让第三方 CSS（如 CDN、Tailwind）真正多端可用
uni-app 构建时不会解析 @import url("https://...") 这类外链，H5 可能凑巧跑通，小程序直接跳过，App 端甚至报解析错误。
- ✅ CDN 样式：用 JS 动态注入
<link>到document.head，时机建议在onLaunch或mounted后加setTimeout(() => {}, 0)确保 DOM 可写 - ✅ Tailwind：必须走构建时插件链（如
weapp-tailwindcss），不能靠 runtime@import - ⚠️ 风险点：动态注入的 CSS 不参与条件编译，HBuilderX 实时预览也看不到，调试只能靠真机或模拟器
怎么安全地用 rpx / px / upx 混合写样式
uni-app 对单位的编译行为差异极大：rpx 在 H5 被转成 vw 计算，upx 是 uni-app 自研单位（仅 H5/App 支持），px 在各端表现最稳定但不响应式。
立即学习“前端免费学习笔记（深入）”；
- ✅ 固定尺寸（图标、边框线）用
px，避免跨端缩放失真 - ✅ 响应式布局（宽度、间距）优先用
rpx，但注意微信小程序基础库低于 2.25.0 时部分 calc 场景会失效 - ⚠️ 别混用：
width: 100rpx + 2px这种写法 H5 编译会出错，小程序直接忽略整条规则
CSS 变量（--color-primary）为什么小程序里读不到
CSS 变量必须定义在 :root 或 html 下才全局有效，而 App.vue 的 <style scoped> 会把 :root 也隔离掉；更麻烦的是，微信小程序旧版 WebView 对 getPropertyValue 返回空字符串是已知缺陷。
- ✅ 正确做法：新建
static/css/variables.css，内容为:root { --color-primary: #409eff; }，然后在main.js中import '@/static/css/variables.css' - ✅ 主题切换：用
document.documentElement.setAttribute('data-theme', 'dark')+ CSS 层级控制，比逐个setProperty更可靠 - ⚠️ 注意：
/* #ifdef */块里定义变量无效——CSS 变量不走条件编译逻辑，会被全端加载
最常被忽略的其实是时机问题：JS 动态改 CSS 变量、动态注入外链 CSS、甚至某些平台对 document.documentElement 的访问权限，都要求 DOM 已就绪且渲染上下文可用，mounted 都不一定够，得加一层异步兜底。
