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