vite项目中如何使用postcss-px-to-viewport

### 在 Vite 项目中配置 `postcss-px-to-viewport` 实现 px 转换为 viewport 单位 #### 安装必要的依赖包 为了在 Vite 项目中使用 `postcss-px-to-viewport` 插件，需要先安装该插件以及 PostCSS 的相关工具。 ```bash npm install postcss-px-to-viewport --save-dev ``` 此命令会将 `postcss-px-to-viewport` 添加到项目的 devDependencies 中[^1]。 #### 创建或修改 PostCSS 配置文件 对于 Vite 项目而言，推荐创建一个名为 `postcss.config.js` 的配置文件来定义 PostCSS 和它的插件设置。如果已经存在类似的配置文件，则可以直接编辑它。 ```javascript // postcss.config.js module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 要转化的单位，默认为'px' viewportWidth: 375, // 设计稿的视口宽度 viewportHeight: 667, // iPhone6屏幕高度; 如果不设定则默认按照2394px计算; unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数. propList: ['*'], // 可以指定是哪些属性要转换单位，默认['*'] selectorBlackList: [],// 黑名单，某些情况下的特殊类名不需要被转换成rem的情况 minPixelValue: 1, // 设置最小的转换数值，默认0 mediaQuery: false, // 媒体查询里的单位是否需要转换单位，默认false replace: true // 替换的方式，默认替换true, } } }; ``` 这段代码展示了如何通过 `postcss.config.js` 文件引入并配置 `postcss-px-to-viewport` 插件的具体参数选项[^3]。 #### 修改 vite.config.ts (如果是 TypeScript 项目) 当使用的是带有 TypeScript 支持的 VITE 构建环境时，还需要确保 `vite.config.ts` 正确设置了 CSS 处理器： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ css: { postcss: './postcss.config.js', }, plugins: [ vue(), ], }); ``` 这里指定了 `postcss` 属性指向外部的 `postcss.config.js` 文件路径，从而让 Vite 使用自定义的 PostCSS 配置处理样式表[^4]。 完成上述操作之后，重启 Vite 开发服务器使新的配置生效即可实现 px 到 vw 的自动转换功能。