如何在Uni-app项目中全局配置Less以生成各小程序CSS-css教程-PHP中文网

Less变量和mixin无法跨端生效，因Less不参与UniApp条件编译流程；条件编译必须写在组件内或uni.scss中，且单位须统一用px配合postcss-pxtorem（rootValue=750）转换为rpx/upx。

如何在uni-app项目中全局配置less以生成各小程序css

Less变量和mixin无法跨端生效，因为编译不触发平台条件逻辑

UniApp的条件编译（如#ifdef MP-WEIXIN）只在Vue文件的块或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根本没解析这些注释。

条件编译必须写在的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的里@import '@/styles/common.less'，那这个common.less里的变量（如@primary-color）在其他页面的scoped style里就不可用——scoped会加属性选择器隔离，变量作用域断了。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确做法是把所有全局变量、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';