vite使用postcss-px-to-viewport 插件

在 Vite 工程中，你可以使用 postcss-px-to-viewport 插件来自动将 CSS 中的像素单位转换为视口单位（vw、vh 等），从而简化响应式布局的设计。以下是如何在 Vite 工程中配置和使用 postcss-px-to-viewport 插件的步骤：

1. 安装依赖

首先，你需要安装 postcss 和 postcss-px-to-viewport 这两个依赖。你可以使用 npm 或 yarn 来安装它们：

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

或

yarn add postcss postcss-px-to-viewport --dev

2. 配置 PostCSS

在 Vite 工程中，PostCSS 的配置通常是在 vite.config.js 或 vite.config.ts 文件中进行的。你需要在这个文件中添加 PostCSS 的配置，并引入 postcss-px-to-viewport 插件。

以下是一个示例配置：

//vite.config.js
import { defineConfig } from 'vite';
//引入postcss-px-to-viewport
import postcss from 'postcss';
import pxToViewport from 'postcss-px-to-viewport';

export default defineConfig({
	css: {
		postcss: {
			plugins: [
				pxToViewport({
					unitToConvert: 'px', // 需要转换的单位，默认为'px'
					viewportWidth: 375,  // 基准视口宽度（对应设计稿的宽度）
					viewportHeight: 667, // 视口高度（可选）
					unitPrecision: 5,    // px转换为vw的小数位数（很多情况下用5）
					propList: ['*'],     // 指定需要转换的属性，'*'表示全部转换，'font-size'表示只转换font-size属性
					viewportUnit: 'vmin',  // 指定需要转换成的视口单位，默认vw
					fontViewportUnit: 'vmin', // 字体使用的视口单位，默认vw
					selectorBlackList: [], // 指定不转换为视口单位的类名，用逗号隔开
					minPixelValue: 1,    // 小于或等于1px不转换为视口单位，默认1
					mediaQuery: false,   // 允许在媒体查询中转换px
					replace: true,       // 是否直接替换而不是添加后缀
					exclude: /node_modules/ // 设置忽略文件，用正则表达式匹配路径
				}),
			]
		}
	},
});

3. 编写 CSS

现在，你可以在你的 CSS 文件中使用像素单位了，postcss-px-to-viewport 插件会在构建时自动将它们转换为视口单位。例如：

/* src/styles/main.css */
body {
  font-size: 16px; /* 这将被转换为vw单位 */
}

.container {
  width: 375px; /* 这将被转换为vw单位，具体数值取决于你的viewportWidth配置 */
}

4. 运行 Vite

最后，你可以运行 Vite 来构建或开发你的项目。Vite 会在构建过程中自动应用 PostCSS 的配置，并转换你的 CSS 文件中的像素单位。

npm run dev

或

yarn dev

如果你想要构建生产版本的代码，可以使用以下命令：

npm run build

或

yarn build

现在，你的 Vite 工程应该已经成功配置了 postcss-px-to-viewport 插件，并且可以在 CSS 中使用像素单位，它们会在构建时被自动转换为视口单位。