vite 里postcss-px-to-viewport 火狐怎么设置

如果你想在 Vite 中使用 postcss-px-to-viewport 插件来将 px 单位转换为 vw/vh 单位，你可以按照以下步骤进行设置：

1. 首先，在你的 Vite 项目中安装 postcss-px-to-viewport 插件：

   npm install postcss-px-to-viewport -D

2. 然后，在你的 Vite 项目根目录下创建 postcss.config.js 文件，并将以下代码添加到该文件中：

   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 375, // 设计稿宽度
         unitPrecision: 3, // 转换后保留的小数位数
         viewportUnit: 'vw', // 转换后的单位
         selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
         minPixelValue: 1, // 最小的转换数值
         mediaQuery: false // 是否在媒体查询中转换
       }
     }
   }

3. 最后，在你的 Vite 项目中的 main.js 或者 main.ts 文件中引入 postcss.config.js 文件：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   import postcssConfig from './postcss.config.js' // 引入 postcss.config.js 文件

   export default defineConfig({
     plugins: [vue()],
     css: {
       postcss: {
         plugins: [
           require('postcss-import'),
           require('postcss-url'),
           require('autoprefixer'),
           require('tailwindcss'),
           require('postcss-px-to-viewport')(postcssConfig.plugins['postcss-px-to-viewport']) // 将 postcss-px-to-viewport 插件加入 postcss 插件列表中，并传入配置参数
         ]
       }
     },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src')
       }
     }
   })

这样就完成了 postcss-px-to-viewport 在 Vite 中的设置。请注意，以上代码中的配置参数可以根据你项目的需求进行调整。同时，需要注意的是，postcss-px-to-viewport 插件在火狐浏览器中的表现应该与其他浏览器类似，不需要特别的设置。