Less变量和mixin无法跨端生效，因Less不参与UniApp条件编译流程；条件编译必须写在<style lang="less">组件内或uni.scss中，且单位须统一用px配合postcss-pxtorem（rootValue=750）转换为rpx/upx。
Less变量和mixin无法跨端生效，因为编译不触发平台条件逻辑
UniApp的条件编译（如#ifdef MP-WEIXIN）只在Vue文件的<style>块或uni.scss中生效，而Less文件本身是纯CSS预处理，不参与UniApp的条件编译流程。你在Less里写@mixin btn() { color: red; }，再用.btn { .btn(); }，它只会原样编译成CSS，不会根据平台插入rpx或跳过某段规则。
常见错误现象：在common.less里写了/* #ifdef MP-WEIXIN */.box { width: 100rpx; }/* #endif */，结果编译后H5和小程序都出现该规则——因为Less loader根本没解析这些注释。
- 条件编译必须写在
<style lang="less">的Vue单文件组件内，或直接写进uni.scss（它支持条件编译） - 若坚持用Less做全局样式，可把平台差异部分拆到
mp-weixin.less、h5.less等独立文件，再用@import配合条件编译包裹 - 别在
@import语句外写#ifdef，否则整个导入会被某端忽略，导致样式丢失
PostCSS插件必须对准px单位，且rootValue要设为750
Less本身不转换单位，postcss-pxtorem这类插件只处理px字面量。你写width: 100px，它能转成width: 1.33333333rem（按750设计稿），再由UniApp运行时转成rpx；但你写width: 100rpx，插件直接跳过，最终小程序里还是100rpx——而H5端根本不认这个单位，就挂了。
检查vue.config.js中是否配置正确：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 750, // 必须是750，不是375也不是设备宽度
propList: ['*'],
exclude: /node_modules|common\/icon/
})
]
}
}
}
}-
rootValue: 750是硬性要求，适配UniApp默认设计稿宽度；设成375会导致rpx值翻倍，小程序布局错乱 -
propList: ['*']确保所有含px的属性都被转换，包括border、padding等 -
exclude建议排除icon类资源，避免字体图标尺寸被误转
全局Less入口必须通过uni.scss引入，不能直接import到App.vue
UniApp构建系统只识别uni.scss为全局样式入口，且它支持条件编译和变量注入。如果你在App.vue的<style lang="less">里@import '@/styles/common.less'，那这个common.less里的变量（如@primary-color）在其他页面的scoped style里就不可用——scoped会加属性选择器隔离，变量作用域断了。
正确做法是把所有全局变量、mixin、基础重置样式统一收口到uni.scss，再用@import引入Less文件：
// uni.scss /* #ifdef MP-WEIXIN */ @import '@/styles/mp-weixin.less'; /* #endif */ /* #ifdef H5 */ @import '@/styles/h5.less'; /* #endif */ @import '@/styles/variables.less'; @import '@/styles/mixins.less';
-
uni.scss必须放在项目根目录，且文件名不能改 - 所有
@import路径要用绝对路径（@/开头），否则HBuilderX可能找不到 - 变量定义（
@color-primary）必须放在uni.scss最前面，否则后续@import的文件用不到
小程序端rpx生成依赖构建链路完整，漏掉任意一环都会白屏或错位
从100px到小程序真实渲染的100rpx，中间经过三步：Less → CSS → rem → rpx。任何一步断掉，比如PostCSS没跑、rem没转、或平台判断失败，最终结果就是H5正常、小程序元素堆叠或消失。
最容易被忽略的点是：微信开发者工具开启「启用自定义处理器」选项。如果关着，即使配置全对，px也不会转rpx，只显示原始像素值，小屏上直接缩成针尖大小。
- 真机调试前，务必在微信开发者工具右上角「详情 > 本地设置」里勾选「启用自定义处理器」
- 检查
node_modules/.uni-app-service/下是否有postcss-pxtorem执行日志，没有说明插件根本没加载 - 修改
variables.less后热更新有时不触发PostCSS重跑，需手动删node_modules/.uni-app-service缓存再重启
