<p>/ #ifdef /块注释是uni-app唯一识别的CSS条件编译方式，因CSS解析器忽略//单行注释，且编译器仅扫描顶格无空格的/ #ifdef PLATFORM /块；仅支持独立.css/.scss文件或非scoped style标签，不支持嵌套或scoped样式。</p>
直接用 /* #ifdef */ 块注释包裹 CSS 规则，是唯一被 uni-app 编译器识别的条件样式引入方式；其他写法（比如 // #ifdef 或嵌套在选择器内部）全部无效。
为什么 // #ifdef 在 .css/.scss 里完全不生效？
CSS 解析器根本不处理单行注释里的条件标记——它只当那是普通文本跳过。uni-app 的条件编译逻辑只扫描 /* ... */ 块注释，且要求 #ifdef 顶格、前后无空格。哪怕多一个空格，整块样式都会照常输出到所有端，根本不会剔除。
-
/* #ifdef H5 */ .btn { color: red; } /* #endif */✅ 正确，H5 端独有 -
// #ifdef H5 .btn { color: red; } // #endif❌ 完全无效，三端都存在 -
/* #ifdef H5 */ .btn { color: red; } /* #endif */❌ 开头空格导致识别失败
哪些文件位置支持 CSS 条件编译？
仅两类地方能用：独立 .css 或 .scss 文件，以及 <style> 标签（但必须去掉 scoped 属性）。其余一律不支持。
-
pages/index/index.vue里的<style scoped>：写了/* #ifdef */也白搭，编译器直接忽略 -
pages.json：虽支持// #ifdef，但它是 JSON，不能加注释——真要条件配置，得把/* #ifdef */放在文件最顶部注释区，且确保删掉非法逗号或重复 key -
App.vue中的<style>：可以，只要没加scoped
多个平台共用同一套样式怎么写？
用 || 连接平台标识符，不能用 &&，语法不支持交集判断。常见组合如 /* #ifdef APP-PLUS || MP-WEIXIN */ 表示 App 和微信小程序都启用这段样式。
立即学习“前端免费学习笔记（深入）”；
-
/* #ifdef H5 || MP-BAIDU */→ H5 和百度小程序共用 -
/* #ifndef MP-TOUTIAO */→ 所有端都加载，唯独抖音小程序剔除 - 别写
/* #ifdef MP-WEIXIN && H5 */，编译器报错或静默失败
为什么两个 /* #ifdef */ 块定义同一个 class 会出问题？
编译后可能产生规则覆盖冲突，尤其当样式被抽成全局 CSS 时。更稳的做法是用平台 class 隔离，配合条件编译控制作用域注入。
- 模板中：
<view class="card card--h5">（H5 端） /<view class="card card--mp-weixin">（微信小程序） - CSS 中：
/* #ifdef H5 */ .h5 .card--h5 { border-radius: 8px; } /* #endif */ - 再在根节点动态加 class：
<view :class="platformClass">，platformClass根据uni.getSystemInfoSync().platform或编译宏决定
最容易被忽略的是：条件编译只发生在编译阶段，运行时无法切换；一旦打包完成，哪个平台加载哪段 CSS 就固定了。所以调试时务必确认目标平台是否真的被选中编译，而不是靠浏览器开发者工具临时改 class 去“模拟”。
