- 找了好几个插件不支持tsx,jsx语法写的,有些连class中的px都转换了,所以就自己手动写了一个。
vite-plugin-style-to-vw
一个可以将 标签内样式 px 转换 vw / rem 的 plugin
一个可以将 标签内样式 px 转换 vw 的 plugin
说明
- 支持vue,tsx,jsx 文件输入
- 支持对象写法
- 支持行内样式和换行样式
- 支持vue3
- 支持react
语言
安装
npm install vite-plugin-style-to-vw -D
or
pnpm install vite-plugin-style-to-vw -D
or
yarn add vite-plugin-style-to-vw -D
使用
vite.config.js
vue示例 ,react同理
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vitePluginStyleToVw from "vite-plugin-style-to-vw";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vitePluginStyleToVw({
allReplace:false,
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
minPixelValue: 1,
attributeList:[] ,
}), vue()],
});
开发原因
有些插件会将class中原子化插件的中的class=‘text-20px’ 转换为 class=‘text-2.6666666666666665vw’,所以写了这个插件,
只转化style中的,
鉴于有些不用原子化插件,又希望全部属性中的px都转换成vw,allReplace 配置选项设置为true即可
默认处理 style ,也可以添加额外的属性处理,只支持vue,(react不支持,react请搭配stylePxToVw使用)
vitePluginStyleToVw(