vite-plugin-style-to-vw
A plugin that can convert intra-tag style px to vw
Language
Install
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
Basic use
vite.config.js
Vue, must be written before vue ()
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vitePluginStyleToVw from "vite-plugin-style-to-vw";
export default defineConfig({
plugins: [vitePluginStyleToVw({
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
minPixelValue: 1,
}), vue()],
});
react
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginStyleToVw from 'vite-plugin-style-to-vw';
export default defineConfig({
plugins: [
vitePluginStyleToVw(),
react()
],
})
Support for vue,tsx,jsx file import
Input
<h3 style="font-size: 28px;margin-top: 10px;width:500px">Test</h3>
<h3 style="
font-size: 28px;
margin-top: 10px;
width:500px;">
Test</h3>
<h3
:style="{fontSize:'28px',marginTop: '10px'}">
Test</h3>
<h3
style={{font-size:'28px';margin-top: '10px'}}>
Test</h3>
<h3
style=
{{font-size:'28px';
margin-top: '10px'}}
>
Test</h3>
Output
<h3 style="font-size: 3.73333ww;margin-top: 1.33333vw;width:66.6667vw">Test</h3>
<h3 style="
font-size: 3.73333ww;
margin-top: 1.33333vw;
width:66.6667vw">
Test</h3>
<h3
style="font-size: 3.73333ww;margin-top: 1.33333vw;">
Test</h3>
<h3
style="font-size: 3.73333ww;margin-top: 1.33333vw;">
Test</h3>
<h3
style="font-size: 3.73333ww;margin-top: 1.33333vw;"
>
Test</h3>
If you don't want to switch, please use PX instead.
Configuration parameters
Default configuration
{
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
minPixelValue: 1,
}
Draw lessons from vite-plugin-style-vw-loader
https://github.com/gitboyzcf/vite-plugin-style-vw-loader