vite,将行内样式style中的px转成vw插件

  • 找了好几个插件不支持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(
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值