vue3+ts+vite px转rem

你可以使用 `postcss-pxtorem` 插件来将 PX 值转换为 REM 值。首先，安装 `postcss-pxtorem` 和 `lib-flexible`：

npm install postcss-pxtorem lib-flexible --save-dev

然后，在项目根目录下创建一个 `.postcssrc.js` 文件，添加以下配置：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 设计稿宽度的1/10，如果设计稿宽度为750px，则rootValue为75
      unitPrecision: 5, // 保留5位小数
      propList: ['*'], // 哪些属性需要转换，* 表示全部
      selectorBlackList: [], // 忽略转换的选择器
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }),
    require('postcss-flexible')({
      remUnit: 16 // 设计稿宽度的1/10，如果设计稿宽度为750px，则remUnit为75
    })
  ]
}

最后，在 `vite.config.js` 中添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcss from 'rollup-plugin-postcss'

export default defineConfig({
  plugins: [
    vue(),
    postcss({
      extract: true,
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 16, // 设计稿宽度的1/10，如果设计稿宽度为750px，则rootValue为75
          unitPrecision: 5, // 保留5位小数
          propList: ['*'], // 哪些属性需要转换，* 表示全部
          selectorBlackList: [], // 忽略转换的选择器
          replace: true,
          mediaQuery: false,
          minPixelValue: 0
        }),
        require('postcss-flexible')({
          remUnit: 16 // 设计稿宽度的1/10，如果设计稿宽度为750px，则remUnit为75
        })
      ]
    })
  ]
})

现在，你就可以在 Vue3 + TypeScript + Vite 项目中使用 PX 转 REM 了。