postcss 将px转换成rem vuecli3+vant+vue+postcss

1.安装 npm install postcss-pxtorem --save

2.找到postcss.config.js 

默认是这样
module.exports = {
  "plugins": {
    "autoprefixer": {},
  }
}

修改成这样
module.exports = {
  "plugins": {
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": { 
      "rootValue": 37.5, 根据UI提供的375尺寸来，如果设置rootValue等于75，那么按照UI提供的750尺寸来
      "propList": ["*"]
    }
  }
}

3.重启项目即可

 

如果在项目中使用了Vant UI，这样设置会导致Vant里的样式很多都改变，那我们即想用Vant又想用postcss怎么办呢？

打开postcss.config.js 粘贴复制即可实现
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

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
      })
    ]
  }
}