css全局引入必须走main.js或app.vue的非scoped style块，否则小程序端失效；因scoped样式隔离导致@import规则无法透出到子页面，h5看似生效但小程序完全不生效。
CSS 全局引入必须走 main.js 或 App.vue 的非 scoped style 块，否则在小程序端基本失效。
为什么不能只在 App.vue 的 scoped style 里写 @import？
uni-app 编译器会把 scoped 样式隔离到组件内部作用域，@import 进来的 CSS 规则也受此限制——H5 看似生效，但微信/支付宝小程序里完全不透出到子页面或组件。这不是 bug，是编译策略决定的。
- scoped style 中的
@import "@/static/css/reset.css"→ 小程序端被忽略 - 即使 import 成功，变量、动画、伪类选择器等也大概率无法跨组件复用
- 官方推荐路径是：静态资源放
static/，全局样式文件统一走 JS 导入或非 scoped 块
最稳的两种方式：main.js 导入 vs App.vue 非 scoped style
二者都能绕过 scoped 隔离，但适用场景不同：
-
main.js导入（推荐）：import "@/static/css/variables.css"、import "@/common/uni.css"—— 所有平台 100% 生效，且支持动态加载逻辑（比如按主题切换引入不同 CSS） -
App.vue的非 scoped style：<style>@import "@/static/css/base.css";</style>—— 简单直接，但无法做条件判断，也不方便配合 JS 控制加载时机 - 别混用：同一个 CSS 文件不要既在
main.js导入，又在App.vue里@import，可能触发重复解析或优先级冲突
引入外部 CDN CSS（如 iconfont、animate.css）的实操要点
CDN 地址不能用 @import 写在 style 标签里（uni-app 不支持解析远程 URL），必须用 JS 动态插入 link 标签。
- 在
main.js或App.vue的onLaunch钩子中执行： const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://at.alicdn.com/t/c/font_xxx.css"; document.head.appendChild(link);- 注意加
onload回调判断加载状态，避免样式未就绪就渲染依赖它的组件 - 微信小程序基础库低于 2.27.0 时，
document.head可能为 null，需加空值判断
常见踩坑：uni.css、iconfont.ttf、reset.css 的顺序和位置
字体文件（如 uni.ttf）必须和对应 CSS 在同一目录，且 CSS 中的 src: url(...) 路径要相对 static 根目录写；顺序错会导致图标显示为方块。
- 正确结构：
static/fonts/uni.ttf+static/css/uni.css，CSS 中写src: url("../fonts/uni.ttf") - 所有全局 CSS（包括 reset、uni.css、自定义变量）应在
main.js中按依赖顺序导入：reset → 变量 → 组件库 → 业务基础样式 - 不要把
uni.css放进components/或pages/目录下再 import —— 路径别名@/指向项目根，错放会导致路径解析失败
真正容易被忽略的是：小程序端不支持 @import 嵌套超过 3 层，也不支持 @import 后接媒体查询。如果用了多层 import 链，建议全部 flatten 到一个入口 CSS 文件里再引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
