怎么在Uni-app中引入平台相关的CSS_利用条件编译注释区分不同终端样式-css教程-PHP中文网

css条件编译必须用/ #ifdef /块注释，不能用//单行注释；仅支持独立.css/.scss文件或非scoped style标签；需避免嵌套、语法错误及平台兼容性问题。

怎么在uni-app中引入平台相关的css_利用条件编译注释区分不同终端样式

uni-app里CSS条件编译必须用`/* #ifdef */`，不能用`// #ifdef`

样式文件不认 JS 风格的单行注释。你在 .scss 或 .css 里写 // #ifdef H5，编译器直接当普通注释跳过，整块样式仍会输出到所有端——这不是“没生效”，是根本没被识别。正确写法只能是块注释包裹，且#ifdef前后不能有空格，顶格写：

/* #ifdef H5 */ → 仅 H5 端保留其间的 CSS 规则
/* #ifndef MP-WEIXIN */ → 微信小程序端剔除，其余端保留
/* #ifdef APP-PLUS || MP-ALIPAY */ → App 和支付宝小程序共用同一套样式

多平台用||连接，别写&&，语法不支持交集判断。

条件编译不能嵌套在选择器内部，必须包裹完整规则块

下面这种写法是错的：

/* #ifdef H5 */
.btn { color: red; }
/* #endif */
/* #ifdef MP-WEIXIN */
.btn { color: green; }
/* #endif */

问题在于：两个规则都定义了.btn，但编译后可能产生冲突或覆盖，尤其当它们被抽离进全局样式时。更稳妥的做法是用平台前缀 class 隔离：

uni-app

uni-app 官方文档、npm 包和项目创建入口。

下载

模板中加平台特有 class：<button class="btn btn--h5"></button> 或 <button class="btn btn--mp-weixin"></button>
样式里用父级上下文控制：.h5 .btn--h5 { color: red; }、.mp-weixin .btn--mp-weixin { color: green; }
再配合 /* #ifdef H5 */ 包裹整个 .h5 规则块，确保只在 H5 端注入该作用域

pages.json 和组件内 style 标签不支持条件编译

pages.json 虽然支持 // #ifdef，但它是 JSON 格式，不能写注释——实际要用时得把条件编译块放在顶层注释区，且确保编译后 JSON 合法（比如删掉逗号、避免键名重复）。而组件内的 <style scoped></style> 标签，哪怕你写了 /* #ifdef */，uni-app 也不处理——条件编译只作用于独立的 .css、.scss 文件，或 <style></style> 非 scoped 块（且需注意 HBuilderX 版本兼容性）。

所以真要差异化样式，优先走外部样式表 + 平台 class 方案，别赌 <style scoped></style> 里的条件编译能跑通。