1、安装过程请点击移步
postcss-pxtorem官网解释点击进入
2、这里只修改了1中的如下部分
postCssPxToRem({
// rootValue: 37.5, // 设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
rootValue ({
file }) {
// 如果是 Vant 的样式就按照 37.5 处理转换
// 如果是我们自己的样式就按照 75 处理转换
// console.log(file)
return file.indexOf('vant') !== -1 ? 37.5 : 75
// 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
// 多少就直接写多少即可,不用除以2了
},
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
// 只修改这个部分 The selectors to ignore 意思是要忽略的选择器,也可以用正则匹配
// /^\.aaa$/这个点要写上,意思是以.开头以aaa结尾的
selectorBlackList: ['van', 'jjw', /^\.aaa$/]
// exclude()
})
3、app.vue中的内容如下:
<template>
<div class="van-test">van-test</div>
<div class="vvvan-test">vvvan-test-test</div>
<div class="test">avan-test</div>
<div class="jjw">jjw-test</div>
</template>
<script setup>
</script>
<style scoped lang="less">
// 页面原样显示出来px没有转rem,说明以van开头的过滤掉了
.van-test{
height: 50px;
background-color: pink;
}
// 页面原样显示出来px没有转rem,说明只要包含van的都会被过滤掉
.vvvan-test{
height: 50px;
background-color: greenyellow;
}
// px转换成了rem
.test{
height: 50px;
background-color: deeppink;
}
// 原样显示,px没有转rem,说明可以排除多个
.jjw{
height: 50px;
background-color: yellow;
}
</style>
4、显示结果:
exclude:(String, Regexp, Function) The file path to ignore and leave as px.表示的是排除以文件形式设置的样式例如:
selectorBlackList: ['van', 'jjw', /^\.aaa$/], // /^\.aaa$/这个点要写上,意思是以.开头以aaa结尾的
//以下两种均可,作用就是排除路径中包含test的即路径包含test的他们的px不用转成rem
// exclude: /test/
exclude: 'test'
app.vue中的style中导入样式
<style scoped lang="less">
@import "assets/test"; // 将样式导入
test.less中的内容:
.box{
height: 50px;
background-color: palegreen;
}