SCSS本身不导致样式不一致，问题在于编译后CSS被各端不同解析：非H5端无样式隔离、rpx计算逻辑差异、选择器兼容性差及@import在条件编译中失效。
SCSS 本身不会导致平台样式不一致——真正出问题的是编译后生成的 CSS 被不同平台以不同方式解析和渲染。关键不在预处理，而在「编译产物如何被各端消费」。
SCSS 编译后未启用 scoped 导致样式全局污染
非 H5 端（小程序、App）默认不启用样式隔离，而 H5 端 Vue 默认开启 scoped。如果你的 <style lang="scss"> 没加 scoped 属性，H5 会自动加 hash 隔离，但微信小程序、支付宝小程序、App 端直接把 class 当全局用，结果就是：H5 看起来正常，其他端样式乱串。
- 检查所有
<style>标签是否显式写了scoped，尤其注意父子组件嵌套时父组件漏写 - 不要依赖 IDE 自动补全或“习惯性省略”，uni-app 不会帮你兜底
- 若需全局样式（如重置、主题色变量），统一放在
App.vue或@/common/uni.css中，且不加scoped
rpx 在不同平台实际计算逻辑不同
微信小程序的 rpx 是基于屏幕宽度 750px 等分；支付宝小程序的 rem 却依赖运行时 document.documentElement.style.fontSize，而这个值在支付宝内核里可能被动态修改或未初始化；App 端则通过 Weex 引擎将 rpx 映射为 px，但基准换算系数未必和设计稿一致。
- 避免混用
rpx和rem，同一项目只选一种响应式单位 - 优先使用
upx（uni-app 官方推荐），它由框架统一转换，比手写rpx更可靠 - 调试时用
uni.getSystemInfoSync().platform打印当前平台，再结合console.log输出实际计算后的像素值，别只信设计稿标注
条件编译没覆盖到关键选择器或伪类
小程序 WebView（尤其是百度、支付宝）对 CSS 选择器支持极弱：* + .class、:not()、::before（双冒号）、属性选择器如 [data-v-xxx]（scoped 自动生成的）都可能被忽略或报错，导致样式失效或降级。
立即学习“前端免费学习笔记（深入）”；
- 禁用通配符选择器
*，哪怕只是写在注释里也建议删掉 - 避免在
#ifdef MP-BAIDU块中使用:hover或::after，百度小程序基本不支持 - 原生组件（如
<button open-type="share">）必须重置默认样式，不能只靠 SCSS 嵌套覆盖 —— 它们的内建样式优先级高于普通 class
最常被忽略的一点：SCSS 的 @import 在条件编译块里不会被识别。比如你在 #ifdef MP-WEIXIN 里 @import './weixin.scss'，编译器会直接跳过这行，文件根本不会引入。要确保平台专属样式是直接写在条件块内，或用独立的 <style> 标签配合 #ifdef 包裹整段 CSS。
