uni.scss 不支持条件编译，因其被 scss 预处理器提前处理，未经过 uni-app 构建系统的条件解析；正确做法是在 app.vue 的 中用 #ifdef 条件导入平台专属变量文件，或通过构建工具注入环境变量并在 scss 中用 @if 判断。
uni.scss 里直接写 #ifdef 不生效，不是你配置错，是它压根不支持 —— 这个文件在 uni-app 编译流程中被当作纯 SCSS 源文件提前处理，条件编译指令早被跳过了。
uni-app 中 uni.scss 的条件编译为什么失效
uni-app 的条件编译只在 .vue 文件的 <template></template>、<script></script>、<style></style> 块内有效；而 uni.scss 是被预处理器（如 sass）单独读取并编译的，此时构建系统还没介入条件解析。所以像这样写：
// uni.scss /* #ifdef MP-WEIXIN */ $primary-color: #07c160; /* #endif */ /* #ifdef H5 */ $primary-color: #1890ff; /* #endif */
结果只会得到最后一个赋值（$primary-color: #1890ff），前面的被覆盖，条件完全没起作用。
用 @import + 条件编译替代全局变量注入
真正可行的做法，是在组件或 App.vue 的 <style></style> 标签里做条件引入，让不同平台加载各自的变量文件：
- 新建
styles/vars-weixin.scss、styles/vars-h5.scss等，各自定义$primary-color等变量 - 在
App.vue的<style lang="scss"></style>里按需导入：
<style lang="scss">
/* #ifdef MP-WEIXIN */
@import './styles/vars-weixin.scss';
/* #endif */
/* #ifdef H5 */
@import './styles/vars-h5.scss';
/* #endif */
/* #ifdef APP-PLUS */
@import './styles/vars-app.scss';
/* #endif */
<p>// 后续所有样式都基于这些变量写
.button {
background-color: $primary-color;
}
</style>
这样变量定义发生在条件生效的上下文中，且每个平台只加载自己那份，不会互相污染。
用 define 注入构建时环境变量给 SCSS
Vite 或 Webpack 构建工具可以将环境变量传进 SCSS（需配合插件）。例如 Vite 中：
- 在
vite.config.ts里通过define注入：define: { '__PLATFORM__': JSON.stringify(process.env.UNI_PLATFORM) } - 再用
sass-options把变量转为 SCSS 全局变量（需vite-plugin-sass-globals或自定义 loader） - 然后在 SCSS 中用
@if判断：
@if $platform == 'mp-weixin' {
$primary-color: #07c160;
}
@else if $platform == 'h5' {
$primary-color: #1890ff;
}
注意：这个方案依赖构建插件链完整，且 $platform 必须在 import 所有样式前就定义好，否则下游文件看不到变量。
别把平台逻辑塞进 uni.scss，它不是入口
uni.scss 的定位只是“统一导入点”，不是“条件分发中心”。它的内容会被无差别合并进所有平台的样式流，任何想在里面做分支的尝试都会失败。真正需要差异化的地方，必须落在条件编译可触达的位置：组件级 <style></style>、独立 SCSS 文件、或构建配置层。最容易忽略的一点是：变量一旦在 SCSS 中被重复声明，后声明的总会覆盖前声明的 —— 它没有作用域隔离，也没有运行时判断能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
