postcss-pxtorem设置不转换UI框架的CSS单位

在移动端项目中使用postcss-pxtorem做适配，同时也使用到了第三方UI库（vant）。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。

查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器，vant-UI组件库的CSS都是以.van开头的 因此我只需要将 .van 忽略掉就好，具体配置如下：

module.exports = {
  plugins: {
    // 这个工具可以实现自动添加CSS3前缀
    "autoprefixer": {
      overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
    },
    //如果你使用rem来实现移动端多设备适配，这个工具可以把px转换为rem
    "postcss-pxtorem": {
      rootValue: 100, // 指定转换倍率，我现在设置这个表示1rem=100px;
      minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
      unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
      selectorBlackList: ['.van'], // 匹配不被转换为rem的选择器
      propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
      replace: true, // 替换包含rem的规则，而不是添加回退
      mediaQuery: false // 允许在媒体查询中转换px
    }
  }
}