uni-app条件编译在scoped样式中无效，因Vue编译器提前处理导致注释未进入编译流程；平台差异样式须抽离至非scoped的独立CSS文件或App.vue的style块中。
为什么直接在
因为 uni-app 的条件编译只作用于独立的 .css、.scss 文件，或 非 scoped 块。组件内带 scoped 的 style 标签，整个块都会被 Vue 编译器处理为局部作用域，条件编译注释压根不被识别——不是“失效”，是根本没进编译流程。
常见错误现象：H5 和小程序样式一模一样，或者某端白屏、样式错位，查半天发现条件块被原样输出到了所有平台。
- 必须把平台差异样式抽离到单独文件，比如
common/platform.css - 或统一放在
App.vue的（不加scoped）里 - 确保注释格式严格为
/* #ifdef MP-WEIXIN */，顶格、无空格、无缩进 -
// #ifdef单行注释在 CSS/SCSS 中完全无效
@import本地CSS时加scoped会导致样式丢失
很多人在组件里这么写：，结果样式完全不生效。原因是 scoped 会给组件内所有选择器自动添加属性哈希（如 .btn[data-v-xxx]），而 @import 进来的 CSS 没经过这层处理，规则无法匹配。
正确做法只有两个：
- 去掉
scoped，改用（全局作用域），再@import - 把
@import移到App.vue的非 scoped style 块中，由它统一注入
别试图在 pages.json 或组件 style 内部“混合”条件编译和 scoped——这两者互斥，强行组合只会让调试变成猜谜。
CDN 或第三方 CSS（如 Tailwind）不能靠@import url()引入
在 标签里写 @import url("https://cdn.example.com/style.css")，H5 可能勉强工作，但微信小程序会静默忽略，App 端甚至报解析错误。uni-app 构建阶段不处理外链 CSS，也不支持运行时动态解析。
可行方案分两类：
- CDN 类：用 JS 动态创建
注入document.head，且必须在mounted后执行（避免 SSR 场景下 document 不存在） - Tailwind 等原子类框架：必须走构建时插件链，例如
weapp-tailwindcss/vite，靠 PostCSS 扫描模板并生成兼容多端的静态 CSS；@import或import语句纯属无效
注意：JS 动态注入的 CSS 无法参与条件编译，也无法被 HBuilderX 实时预览，真机调试是唯一可靠路径。
rpx/px 混用 + 条件编译 = 隐形陷阱
你写 width: 100rpx;，H5 端会被转成 calc(100vw / 750 * 100)，但微信小程序不支持 calc() 里的除法运算，运行时直接丢弃该声明——控制台几乎不报错，只表现为“样式没生效”。
更隐蔽的是：某些 CSS 属性本身平台就不支持（如 backdrop-filter、display: grid），条件编译不会校验语法，也不会警告。它只是文本剔除，输出后才在运行时报“无效样式”。
- 平台特有属性务必查文档确认支持度，别依赖“写了就有效”
- 推荐用 class 前缀隔离 + 外部样式表，比如给 body 加
class="mp-weixin"，再写.mp-weixin .card { backdrop-filter: blur(10px); } - 条件编译块内避免嵌套选择器，保持规则扁平，降低编译歧义
真正卡住人的从来不是“怎么写条件编译”，而是编译后那段 CSS 到底有没有被某平台执行、以什么方式执行、出错了往哪找——这些都得靠真机日志和逐平台验证，没法靠开发工具一眼看穿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
