px转化成rem

首先下载 npm install postcss-pxtorem

npm install postcss-pxtorem

完成下载之后，在package.json文件中添加

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  },

在项目中创建一个utils文件夹，编写rem.js文件

function setRem() {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    let htmlDom = document.querySelector("html")
    htmlDom.style.fontSize = htmlWidth / 20 + "px"
}
setRem()
window.onresize = function () {
    setRem()
}

然后下一步在main。js中进行引入调用开发即可

效果图

如果提示 PostCSS plugin postcss-pxtorem requires PostCSS 8. 就是版本出错
需要更换成 postcss-pxtorem@5.1.1

npm i postcss-pxtorem@5.1.1

再次运行npm start 就可以了