vue3.0 vite px2rem pxtorem 移动端适配

Posted 2021-09-03 llfididi

1.添加postcss-pxtorem
npm install postcss-pxtorem -D

{
  "name": "business-manage-vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^1.2.5",
    "axios": "^0.21.1",
    "element-plus": "^1.0.2-beta.55",
    "qs": "^6.10.1",
    "vue": "^3.0.4",
    "vue-router": "^4.0.10",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4",
    "postcss-pxtorem": "^6.0.0",
    "sass": "^1.35.2",
    "vite": "^1.0.0-rc.13",
    "vite-plugin-style-import": "^1.0.1"
  }
}

2.新建postcss.config.js

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 192,
      propList: [\'*\'],
      selectorBlackList: [
        \'ant\'
      ]
    }
  }
}