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


所有评论(0)