Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitboyzcf/vite-plugin-style-vw-loader
A loader that can convert the style px in Vue3 label to vw.
https://github.com/gitboyzcf/vite-plugin-style-vw-loader
plugin vue3 vuejs
Last synced: about 2 months ago
JSON representation
A loader that can convert the style px in Vue3 label to vw.
- Host: GitHub
- URL: https://github.com/gitboyzcf/vite-plugin-style-vw-loader
- Owner: gitboyzcf
- License: mit
- Created: 2023-03-01T01:33:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-10-11T10:02:19.000Z (11 months ago)
- Last Synced: 2024-04-19T00:30:48.250Z (5 months ago)
- Topics: plugin, vue3, vuejs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-style-vw-loader
- Size: 101 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Converting the inline style px to vw. (Plugins / Vue)
- awesome-vite - v3 - Converting the inline style px to vw. (Plugins / Vue)
README
# vite-plugin-style-vw-loader
A loader that can convert the style px in Vue3 label to vw.
> English | [中文](https://github.com/gitboyzcf/vite-plugin-style-vw-loader/blob/master/README.zh-CN.md)
## Install
```
npm install vite-plugin-style-vw-loader -D
or
pnpm install vite-plugin-style-vw-loader -D
or
yarn add vite-plugin-style-vw-loader -D
```
## Basic use
vite.config.js
```javascript
import vitePluginStyleVwLoader from "vite-plugin-style-vw-loader";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.NODE_ENV === "production" ? "./" : "/",
plugins: [vitePluginStyleVwLoader(), vue()],
// plugins: [
// vitePluginStyleVwLoader({
// unitToConvert: "px",
// viewportWidth: 750,
// unitPrecision: 5,
// viewportUnit: "vw",
// fontViewportUnit: "vw",
// minPixelValue: 1,
// })
// ],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
```
## Examples
### Input
```html
Test
```
### Output
```html
Test
```
## Configuration
**default configuration：**
```javascript
{
unitToConvert: "px", // The unit to be converted is "px" by default.
viewportWidth: 750, // The viewport width of the design draft, such as the incoming function, whose parameter is the file path currently processed.
unitPrecision: 5, // Precision retained after unit conversion.
viewportUnit: "vw", // Viewport units you want to use.
fontViewportUnit: "vw", // Viewport units used by fonts.
minPixelValue: 1, // Set the minimum conversion value. If it is 1, only values greater than 1 will be converted.
}
```
## Partake
Only the conversion of Vue3 template is supported, and the React template does not. If you also have the need to transform style, welcome to participate in improving the project.