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 中使用像素单位,它们会在构建时被自动转换为视口单位。

相关推荐
带娃的IT创业者2 分钟前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost1 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11061 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白1 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学2 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽2 小时前
【初学】调试 MCP Server
前端·mcp
四月_h3 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate3 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................4 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_5 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员