uni-app怎么使用postcss自动转换px为rpx-uni-app-PHP中文网

uni-app中postcss-pxtorem仅对H5端有效且输出rem，小程序端需启用mp.css.px2rpx开关实现px转rpx；H5不支持rpx单位，小程序不走PostCSS流程。

uni-app怎么使用postcss自动转换px为rpx

uni-app 项目里 postcss-pxtorem 不起作用？先确认你用的是哪个 PostCSS 插件

uni-app 默认不内置 postcss-pxtorem，它只在 H5 平台支持 PostCSS 自动转换，且必须手动配置。小程序平台（如微信、支付宝）根本不会走 PostCSS 流程——它们的样式编译由 uni-app 自己的预处理器接管，postcss-pxtorem 在这里完全无效。

常见错误现象：px 写了一堆，真机调试发现尺寸没变小，H5 也没转成 rpx；或者控制台报错 postcss plugin not found。

如果你目标是「H5 端适配」：可用 postcss-pxtorem，但输出单位是 rem，不是 rpx（rpx 是小程序专属单位，H5 不识别）
如果你目标是「小程序端自动转 rpx」：uni-app 官方提供的是 scss/less 编译时的 px2rpx 功能，和 PostCSS 无关，靠的是 vue.config.js 或 vue.config.ts 中的 h5.postcss 配置项根本不生效
uni-app 的 rpx 转换实际发生在 webpack 的 style-loader 后置阶段，由 @dcloudio/uni-cli-shared 内部处理，只认 .vue 文件中的块里的 px，且仅限于非 scoped 或带 lang="scss" 等预处理器的场景下才稳定触发

想让 .vue 文件里的 px 自动转 rpx，必须开 uni-app 内置的 px2rpx 开关

这个开关不依赖 PostCSS，而是 uni-app CLI 构建链路中硬编码的转换逻辑。它只对标签内未加 !important、未被 v-bind() 动态生成、且未写在 @media 查询深层嵌套里的 px 值生效。

启用方式很简单，在项目根目录的 vue.config.js（或 vue.config.ts）中添加：

module.exports = {
  h5: {
    // 注意：这是 H5 的配置，不影响小程序
  },
  mp: {
    // 小程序平台配置（微信/支付宝等）
    css: {
      // ⚠️ 关键：开启 px 转 rpx（仅对小程序生效）
      px2rpx: true
    }
  }
}

注意：mp.css.px2rpx 是 uni-app 3.0+ 的写法；旧版（如 2.x）需写在 configureWebpack.chainWebpack 里通过插件注入，但已不推荐。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

该转换只影响 .vue 单文件组件内的，对 import './xxx.css' 外部 CSS 文件无效
转换基准是 750rpx = 750px（即设计稿宽度），不可自定义；若设计稿是 375px，需先放大两倍写（比如写 32px 表示 16px@375），否则会缩一半
使用 calc(100px + 20px) 这类表达式时，px 不会被转换

PostCSS 在 uni-app H5 端能做什么？只能转 rem，不能转 rpx

H5 平台走的是标准 Webpack + PostCSS 流程，所以你可以配 postcss-pxtorem，但它的目标单位是 rem，不是 rpx。强行设 unitToConvert: 'rpx' 会导致 H5 页面样式崩坏（浏览器不认识 rpx）。

如果坚持用 PostCSS 做 H5 适配，典型配置如下（放在 vue.config.js 的 h5.postcss 下）：

h5: {
  postcss: {
    plugins: [
      require('postcss-pxtorem')({
        rootValue: 37.5, // 以 375px 设计稿为例：375 / 10 = 37.5
        propList: ['*'],
        selectorBlackList: ['.no-rem']
      })
    ]
  }
}

此配置下，16px → 0.42666667rem，再配合 JS 设置 document.documentElement.style.fontSize 才能生效
不要试图在 H5 里输出 rpx，它不是标准 CSS 单位，Chrome/Firefox 会直接忽略
如果你同时开发 H5 和小程序，建议放弃 PostCSS 统一方案，H5 用 rem + JS 动态根字体，小程序用内置 px2rpx，二者逻辑独立更稳