SCSS在UniApp中H5正常而小程序报错，根本原因是编译链、条件编译机制与平台单位限制未对齐：scoped下@import变量不穿透、additionalData需用as *注入、uni.scss与预处理器配置冲突、rpx/px/rem跨端计算不一致。
在 UniApp 中用 SCSS 写样式本身不难，真正出问题的永远是「H5 正常、小程序编译报错、App 端颜色错乱」——这背后不是语法写错了，而是 SCSS 编译链、uni-app 条件编译机制、平台单位限制三者没对齐。
为什么 @import 在
很多人在组件里这么写：
<style lang="scss" scoped>
@import "@/styles/vars.scss";
.button { background-color: $primary-color; }
</style>
结果 $primary-color 报错 undefined。这不是路径错了，是 scoped + @import 的组合触发了 SCSS 模块隔离：每个组件的 @import 是独立作用域，变量不会穿透到当前样式块；而 scoped 还会额外加属性选择器，让外部导入的规则根本匹配不上。
- ✅ 正确做法：去掉
scoped，或把变量注入交给构建配置统一处理 - ❌ 不要指望在单个组件里靠
@import实现“全局变量” - ⚠️ 即使不加
scoped，多个组件重复@import同一个文件，SCSS 会按引入顺序覆盖变量（后定义 > 前定义），HMR 热更时顺序不可控，样式就飘了
vite.config.ts 中必须用 additionalData 注入变量
Vite 构建的 uni-app（即 uni-app-vite 模板）只认 css.preprocessorOptions.scss.additionalData，prependData 是 Vue CLI 时代的旧配置，写了也白写。
配置示例（注意末尾分号不能少）：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables.scss" as *;'
}
}
}
-
as *是关键：它把所有变量、函数、mixin 直接挂进当前作用域，否则你得写variables.$primary-color - 路径必须用
@/别名，且variables.scss文件真实存在，内容不能含语法错误（比如漏分号） - HBuilderX 有时对别名解析不准，调试时可临时换成相对路径（如
../styles/variables.scss）验证是否路径问题
uni.scss 和 additionalData 会冲突
很多人以为 uni.scss 是“全局 SCSS 入口”，其实它只在未指定 lang 的 块中生效。一旦你写了 ，uni-app 就跳过 uni.scss，完全走 Vite 的 SCSS 预处理器链。
- ✅ 如果你用了
additionalData，就别在uni.scss里再定义变量，否则两套变量并存，容易互相覆盖 - ❌ 不要在
uni.scss里写#ifdef条件编译：SCSS 预处理器根本不识别它，条件块会被当普通注释忽略，最终所有平台都拿到最后一份赋值 - ⚠️ 想做平台差异化变量？得在
块里用#ifdef+@import分别引入vars-weixin.scss、vars-h5.scss等文件
rpx / px / rem 在 SCSS 计算中行为不一致
SCSS 的 calc() 函数、rem 转换、甚至 10px * 2 这种基础运算，在不同平台编译结果可能完全不同。微信小程序不支持 rem，App 端对 rpx 的基准宽度理解与 H5 不同，而 SCSS 在编译时根本不知道目标平台。
- ✅ 推荐方案：所有尺寸变量统一用
px定义（如$space-sm: 8px;），再用 CSS 自定义属性 + JS 动态切换主题或适配逻辑 - ❌ 避免在 SCSS 里写
font-size: $font-size-base * 1.2;然后期望它在小程序里自动转成rpx—— 不会，它就老老实实输出16.8px，然后被小程序截断或忽略 - ⚠️ 如果真要用
rpx，只能手写，别依赖 SCSS 计算；rem基本放弃，uni-app 对它的跨端支持极弱
最常被忽略的一点：SCSS 变量是编译时静态值，它和运行时的 CSS 自定义属性（--primary-color）不是一回事。想实现主题切换，光靠 SCSS 变量远远不够，必须把两者分层设计清楚——前者管结构和逻辑，后者管动态值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
