@import在中无效，因scoped会为选择器添加data-v-属性而导入样式未处理，仅在非scoped中有效；条件编译需顶格书写；CDN CSS须JS动态注入；rpx/px混用导致多端渲染不一致。
直接在 <style></style> 里写 @import 看似能用，但多数时候样式不生效、多端表现不一致——根本原因不是路径写错，而是 uni-app 的 scoped 编译机制、条件编译规则和平台 CSS 加载限制共同导致的。
scoped 标签下 @import 无效
这是最常踩的坑：把 @import "@/common/reset.css"; 放在 <style scoped></style> 里，结果样式完全没作用。
- Vue 的 scoped 会给组件内所有选择器自动加属性标识（如
.btn[data-v-xxx]），但@import进来的 CSS 规则没经过这层处理，匹配不上 - 哪怕路径正确、文件存在，也白搭
- 只在
<style></style>（无 scoped）中才有效，比如App.vue或独立的全局样式文件
条件编译必须顶格写 /* #ifdef */
想让某段 CSS 只在微信小程序生效？别在 @import 行里加注释，也别缩进。
- 错误写法：
// #ifdef MP-WEIXIN或/* #ifdef MP-WEIXIN */（前面有空格） - 正确写法：
/* #ifdef MP-WEIXIN */必须顶格、前后无空格、不能嵌套在选择器内部 - 多平台用
||连接：/* #ifdef H5 || APP-PLUS */；&&不支持 - 注意：编译器不会校验 CSS 属性是否被平台支持（比如
backdrop-filter在微信小程序里直接忽略），运行时才失效，且无提示
CDN 或第三方 CSS 得 JS 动态注入
@import url("https://cdn.example.com/tailwind.css") 在 H5 可能凑合能用，但在小程序或 App 端大概率被跳过甚至报错。
立即学习“前端免费学习笔记（深入）”；
- uni-app 构建阶段不处理外链 CSS，也不支持 runtime 解析
- 正确做法：在
mounted钩子中用 JS 创建<link>标签并 append 到document.head - 示例：
const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://cdn.example.com/animate.css"; document.head.appendChild(link); - 动态注入的 CSS 无法参与条件编译，也不能被 HBuilderX 实时预览，调试必须靠真机或模拟器
rpx/px 混用会触发不同平台单位转换逻辑
同一份 CSS 文件里混用 rpx 和 px，H5、小程序、App 三端渲染结果可能完全不同。
- H5 平台：
rpx被转为px（按 750rpx = 100vw 计算），px原样保留 - 小程序平台：
rpx是原生支持单位，px会被强制转为 rpx（除非显式声明!important或用view组件包裹） - App 平台（v2）：
rpx仅在 webview 渲染层生效，原生渲染层不识别，px更稳定 - 建议：固定尺寸用
px，响应式布局统一用rpx，避免在同一选择器里混写
真正难的从来不是“怎么写那行 @import”，而是搞清它在哪一环被拦截、被忽略、被转换——尤其当 H5 正常而小程序白屏时，问题往往出在 scoped 作用域或条件编译格式上，而不是路径本身。
