<p>在uni-app中正确引入外部CSS需避免scoped作用域隔离、条件编译格式错误及平台单位差异：应将@import置于非scoped style块（如App.vue），条件编译须用/ #ifdef MP-WEIXIN /顶格书写，CDN样式需JS动态注入，rpx用于响应式布局，px用于固定尺寸。</p>
直接引入外部 CSS 文件本身不难，真正卡住人的永远是「引入后在 H5 正常、小程序白屏、App 样式错乱」——这本质不是引入问题，而是 uni-app 的样式编译机制和平台限制共同作用的结果。
用 @import 引入本地 CSS 文件时，scoped 会屏蔽它
很多人在 <style scoped> 里写 @import "@/common/reset.css";，结果样式完全不生效。这是因为 scoped 模式下，Vue 会为当前组件所有选择器自动添加属性选择器（如 .btn[data-v-xxx]），而 @import 进来的 CSS 规则没经过这一层处理，自然被隔离在外。
- ✅ 正确做法：去掉
scoped，或把@import放到<style>非 scoped 块中（如App.vue的全局 style） - ❌ 错误写法：
<style scoped> @import "@/common/uni.css"; </style>—— 导入了，但加了 scope 属性后规则匹配不上 - ⚠️ 注意：
pages.json和组件内<style scoped>标签**完全不支持 CSS 条件编译**，别在这儿试/* #ifdef H5 */
/* #ifdef */ 条件编译只认块注释，且必须顶格写
你在 common/app.css 里写 // #ifdef MP-WEIXIN，编译器当普通注释跳过，整段 CSS 照常输出到所有端。这不是“没生效”，是压根没识别。
- ✅ 必须用
/* #ifdef MP-WEIXIN */，前后不能有空格，不能缩进，不能嵌套在选择器内部 - ✅ 多平台用
||连接：/* #ifdef H5 || APP-PLUS */；&&不被支持 - ⚠️ 风险点：条件块里写的 CSS 属性可能某平台根本不支持（比如微信小程序不支持
backdrop-filter），编译器不会报错，运行时才失效，且错误提示极模糊
引入第三方 CSS（如 Tailwind、CDN 样式）得绕开编译链
uni-app 默认不会处理 @import url("https://cdn.example.com/style.css") 这类外链，也不支持在 style 标签里动态加载。强行写进去，H5 可能工作，小程序直接忽略，App 端甚至报解析错误。
立即学习“前端免费学习笔记（深入）”；
- ✅ CDN CSS：用 JS 动态创建
<link>标签注入document.head，并在mounted中控制时机 - ✅ Tailwind：必须走 PostCSS 插件链（如
weapp-tailwindcss），靠 Vite 插件在构建时扫描并生成兼容多端的 CSS，不能靠 runtime@import - ⚠️ 注意：动态注入的 CSS 无法参与 uni-app 的条件编译，也无法被 HBuilderX 实时预览，调试只能靠真机或模拟器
rpx / px / rem 单位混用时，编译行为差异极大
你写 width: 100rpx;，H5 端会被转成 width: calc(100vw / 7.5);，小程序端直接按 rpx 渲染，App 端可能转成 px 后失真——单位不是“写了就能用”，而是“写了由谁来解释”。
- ✅ 优先用
rpx做布局和间距（设计稿 750 宽度前提下） - ✅ 固定像素场景（如 border、icon 尺寸）用
px，uni-app 会 1:1 输出，不转换 - ⚠️
rem需手动配置根字体大小，且 App 端对rem支持不稳定，H5 和小程序表现也可能不一致
最易被忽略的一点：CSS 条件编译是纯文本剔除，不校验语法、不检查平台兼容性。你写了一百行 /* #ifdef MP-WEIXIN */，其中某条用了 gap，微信小程序不支持，编译器照发，出问题时你得自己翻着找——没有 warning，没有 source map，只有真机上一句“样式无效”。
