postcss-pxtorem 参数之selectorBlackList、exclude的用法

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-testdiv>
  <div class="vvvan-test">vvvan-test-testdiv>
  <div class="test">avan-testdiv>
  <div class="jjw">jjw-testdiv>
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中导入样式