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