evrone/postcss-px-to-viewport

希望增加全宽的数值配置,比如我要转换为 rpx 单位,全宽应该是 750,现在固定是 100只能转换为 vh 和 vw 。

Opened this issue · 2 comments

希望增加全宽的数值配置,比如我要转换为 rpx 单位,全宽应该是 750,现在固定是 100只能转换为 vh 和 vw 。

image

使用配置及案例:

image

image

image

临时上传插件 postcss-unit-unit 已支持转 rpx ,使用 uniapp 开发,统一使用 rpx 管理方案,当然还保留了原来的可配置参数以支持更多的需求。

这个插件是使用 postcss 8.x 接口实现,不会再提示 postcss-px-to-viewport: postcss.plugin was deprecated.

安装

npm i postcss-unit-unit --save

vite.config.ts 配置

import { defineConfig } from "vite";
// @ts-ignore
import uni from "@dcloudio/vite-plugin-uni";
import px2rpx from 'postcss-unit-unit';

export default defineConfig({
	base: "./",
	plugins: [uni()],
	envPrefix: ["APP_", "VITE_"],
	css: {
		postcss: {
			plugins: [
				px2rpx({
					unitToConvert: 'px',
					viewportWidth: 375,
					unitPrecision: 5,
					propList: ['*'],
					viewportUnit: 'rpx',
					fontViewportUnit: 'rpx',
					fullViewportWidth: 750,
					selectorBlackList: [],
					minPixelValue: 1,
					mediaQuery: false,
					replace: true,
					exclude: undefined,
					include: undefined,
					landscape: false,
					landscapeUnit: 'rpx',
					landscapeWidth: 568
				})
			]
		}
	}
});