vue项目使用vant匹配rem时使用pxtorem的配置操作。

目标：

能够正常使用vant组件库，且匹配公司现有的rem单位。

版本信息：

vue/cli3脚手架。
postcss-pxtorem: ^5.1.1
vue: 2.6.11
vant：^2.10.2

代码文件：

vue.config.js中，找到module.exports位置，然后添加如下代码，懒得一句句解析了。

module.exports = {
  publicPath,
  outputDir: 'dist',
  assetsDir: 'static',
  ......
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            // 把px单位换算成rem单位
            rootValue: 50, // 结果为：设计稿元素尺寸/50，比如元素宽320px,最终页面会换算成 20rem
            propList: ['*'], // 哪些将被转换的属性列表，设置['*']是全部转换。!表示非，如['!letter-spacing']
            unitPrecision: 5, // 保留rem小数点多少位
            selectorBlackList: ['.ignore'], // 忽略选择器并保留为px, 如果这里 .ignore，则.ignore类将被忽略。
            replace: true, // 官网的解释，替换包含rems的规则，而不是添加回退。
            mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
            minPixelValue: 12 // px小于12的不会被转换
            // 为了将vant转化为rem，在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译
            // exclude: /node_modules/i
          })
        ]
      }
    }
  },
}