下载包,一个是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了

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐