vue 3.0 +vite rem 适配

发布于 2023年11月3日热度 1880

vue3+vite安装postcss-pxtorem

1、安装依赖

npm install postcss-pxtorem -D
npm install amfe-flexible -D

2、配置vite.config.ts

import postCssPxToRem from "postcss-pxtorem"
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 75, // 设计稿尺寸 1rem大小
          propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
        })
      ]
    }
  }
})

3、main.js导入

import 'amfe-flexible'