postcss-px-to-viewport vite

你可以使用 PostCSS 插件 `postcss-px-to-viewport` 在 Vite 中实现将像素单位转换为视口单位。以下是在 Vite 中配置该插件的步骤：

1. 确保你的项目中已经安装了 PostCSS 和相应的插件。你可以通过运行以下命令进行安装：

   npm install postcss postcss-px-to-viewport --save-dev

2. 在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下配置：

   // postcss.config.js
   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 375, // 视口的宽度，根据你的设计稿设置
         viewportHeight: 667, // 视口的高度，根据你的设计稿设置
         unitPrecision: 3, // 转换后的小数点位数
         viewportUnit: 'vw', // 要转换的视口单位，默认为 vw
         selectorBlackList: ['.ignore'], // 不进行转换的 CSS 类名，可以使用 ignore 类名进行标记
         minPixelValue: 1, // 最小转换单位的像素值
         mediaQuery: false // 是否在媒体查询中也进行转换
       }
     }
   }

3. 在 Vite 配置文件 `vite.config.js` 中使用 PostCSS 插件。找到 `plugins` 部分，并添加以下代码：

   // vite.config.js
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
     // 其他配置...
     plugins: [
       vue(),
       {
         name: 'postcss',
         async transform(code, id) {
           if (id.endsWith('.vue') || id.endsWith('.css')) {
             const { default: postcss } = await import('postcss');
             const { default: postcssPresetEnv } = await import('postcss-preset-env');
             const { default: postcssPxToViewport } = await import('postcss-px-to-viewport');
             const result = await postcss([
               postcssPresetEnv(),
               postcssPxToViewport({
                 viewportWidth: 375,
                 viewportHeight: 667,
                 unitPrecision: 3,
                 viewportUnit: 'vw',
                 selectorBlackList: ['.ignore'],
                 minPixelValue: 1,
                 mediaQuery: false
               })
             ]).process(code, {
               from: undefined
             });
             return result.css;
           }
         }
       }
     ]
   });

现在，你的 Vite 项目中的 CSS 文件中的像素单位将会被转换为视口单位。请根据你的项目需要调整配置中的参数。