vue2
npm install amfe-flexible --save
import "amfe-flexible"
npm install postcss-pxtorem@5.1.1 --save
vue.config.js里面加入配置项
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 75,
propList: ['*'],
selectorBlackList: ['van'] // 过滤van开头的类名,不进行rem转换
})
]
}
}
}
vue3
npm install amfe-flexible --save
import "amfe-flexible"
npm install postcss-pxtorem@5.1.1 --save
postcss.config.js里面加入配置项
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
// 适用版本 5.1.1
// yarn add -D postcss-pxtorem@5.1.1
// npm install postcss-pxtorem@5.1.1 -D
'postcss-pxtorem': {
rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
propList: ['*'],
},
},
};
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。