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: 3 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 (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-09T06:22:21.000Z (3 months ago)
• Last Synced: 2024-10-09T06:23:57.705Z (3 months ago)
• Topics: plugin, vue3, vuejs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-style-vw-loader
• Size: 101 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 3
• 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.