@ten-k/postcss-px2vw v0.0.2

postcss-px2vw

一款 PostCSS 插件，将 px 转换成 vw 或 rem。

安装

npm i @ten-k/postcss-px2vw -D

使用

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { PostcssPx2Vw } from "@ten-k/postcss-px2vw";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	css: {
		postcss: {
			plugins: [
				PostcssPx2Vw()
			]
		}
	}
});

配置

interface Options {
	type?: "vw" | "rem";
	rootValue?: number;
}

const defineOptions: Required<Options> = {
	type: "vw" /** 转换的单位 */,
	rootValue: 375 /** 设计稿宽度(type为vw时) / font-size值(type为rem时) */
};

type 为 rem 时，除了传递 rootValue 还需自行设置根元素 font-size 等于 rootValue。 示例：

// vite.config.ts
PostcssPx2Vw({
  type: "rem",
  rootValue: 100
})

html, body {
  font-size: 100px;
}

忽略

属性

/* `Px` or `PX` is ignored by `postcss-px2vw` but still accepted by browsers*/
.ignore {
    width: 1Px; // ignored
    height: 2PX; // ignored
}

文件

对于头部包含注释/postcss-px2vw disable/ 的文件，插件不予处理。