vite+vue3如何配置postcss-pxtorem rem

下载包，一个是pnpm 和npm 自己选择

pnpm add  postcss postcss-pxtorem --save-dev

npm install  postcss postcss-pxtorem --save-dev

还需要在下载一个动态字体大小的插件 也是npm和pnpm

pnpm add amfe-flexible

npm i -S amfe-flexible

在main.js中引入

import 'amfe-flexible'

下面的两部很关键，找了很久才找到的希望对你有帮助

在根目录下配置  .postcssrc.cjs文件

// postcss.config.cjs 或者.postcssrc.cjs都可以

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

重新启动项目就可以实现px转为rem了