vue3+vite安装postcss-pxtorem

在Vue 3 + Vite项目中安装postcss-pxtorem并配置它，你需要按照以下步骤操作：

1. 安装postcss-pxtorem：

npm install postcss-pxtorem --save-dev

2. 在vite.config.js文件中配置PostCSS插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-pxtorem
import postcssPxToRem from 'postcss-pxtorem'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcssPxToRem({
          // 根据设计稿尺寸将px转换为rem
          rootValue: 75, // 设计稿尺寸的根字体大小，一般是75（对应设计稿的1rem）
          propList: ['*'], // 需要转换的属性，这里选择转换所有属性
        }),
      ],
    },
  },
})

在上述配置中，rootValue是设计稿尺寸的根字体大小，通常设置为75，因为这样与设计稿的1px对应。propList是一个数组，指定了哪些CSS属性需要转换。*代表所有属性都进行转换。

以上步骤完成后，你的Vite项目将自动使用postcss-pxtorem将CSS中的px单位转换为rem单位。