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

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

1. 安装依赖

首先,你需要安装 postcsspostcss-px-to-viewport 这两个依赖。你可以使用 npm 或 yarn 来安装它们:

bash 复制代码
npm install postcss postcss-px-to-viewport --save-dev

bash 复制代码
yarn add postcss postcss-px-to-viewport --dev

2. 配置 PostCSS

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

以下是一个示例配置:

javascript 复制代码
//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 插件会在构建时自动将它们转换为视口单位。例如:

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

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

4. 运行 Vite

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

bash 复制代码
npm run dev

bash 复制代码
yarn dev

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

bash 复制代码
npm run build

bash 复制代码
yarn build

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

相关推荐
资讯第一线1 小时前
《Windows Server 2022》 [2025年10月版 ] [官方IOS] 下载
前端
非凡ghost1 小时前
EaseUS Fixo(易我视频照片修复)
前端·javascript·后端
非凡ghost1 小时前
Avast Cleanup安卓版(手机清理优化)
前端·javascript·后端
豆苗学前端1 小时前
长时间不操作自动退出登录(系统非活跃状态下自动登出机制的企业级设计方案)
前端·后端·面试
一乐小哥1 小时前
用 AI 搞出 Chrome 版 “飞书 Command+K”!Figma AI 救了我的审美
前端·ai编程
非凡ghost1 小时前
Atlantis Word Processor(文字处理软件)
前端·javascript·后端
小时前端1 小时前
面试官:线上应用内存持续泄漏,你如何快速定位并止血?
前端·浏览器
前端白袍2 小时前
Vue:关于 Vue2 父子组件传值方法 以及 props 的定义方法和使用
前端·javascript·vue.js
非凡ghost2 小时前
TeamViewer 手机版:一键远程控制,深度管理,提升多设备管理效率
前端·javascript·后端
慧一居士2 小时前
Vue项目页面间,页面中跳转及刷新规划,何时使用router-view,router-link,iframe,slots ,使用场景,及对应场景的完整使用示例
前端·vue.js