关于postcss-pxrem和vant - ui组件库冲突页面变小的问题

vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem，最后影响样式。这个问题浪费了很长时间，在这总结一下以免忘了。。。

安装

npm install postcss-pxtorem --save

在postcss.config.js中写入：

const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

module.exports = ({ file }) => {
  let rootValue
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 16
  } else {
    rootValue = 37.5
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ['*'],
        minPixelValue: 2
      })
    ]
  }
}

这样ui组件库和postcss可以并行存在、不会互相影响。