https://github.com/zscumt123/vite-plugin-px-rem-vw

a vite plugin Integrate pxtorem and pxtovw plugins for develop mobile
https://github.com/zscumt123/vite-plugin-px-rem-vw

Last synced: 2 months ago
JSON representation

a vite plugin Integrate pxtorem and pxtovw plugins for develop mobile

• Host: GitHub
• URL: https://github.com/zscumt123/vite-plugin-px-rem-vw
• Owner: zscumt123
• License: mit
• Created: 2022-12-22T11:14:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-06T10:04:22.000Z (3 months ago)
• Last Synced: 2024-03-07T10:00:48.649Z (3 months ago)
• Language: TypeScript
• Size: 61.5 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vite - vite-plugin-px-rem-vw - Integrate PostCSS plugin pxTorem and pxTovw. (Plugins / Framework-agnostic Plugins)

README

        
# vite-plugin-px-rem-vw

Integrate postcss plugin [pxtorem](https://github.com/cuth/postcss-pxtorem) and [pxtovw](https://github.com/lkxian888/postcss-px-to-viewport-8-plugin) in vite 

## Install

```sh

# pnpm

pnpm add -D vite-plugin-px-rem-vw

# yarn

yarn add -D vite-plugin-px-rem-vw

# npm

npm i -D vite-plugin-px-rem-vw

```

## Usage

```ts

// vite.config.js

import { defineConfig } from 'vite'

import pxToRemOrVwPlugin from "vite-plugin-px-rem-vw"

export default defineConfig({

  plugins: [

    pxToRemOrVwPlugin({

      type: 'rem',

      options: {

        rootValue: 20

      }

    }),

  ],

})

```

## Options

```js

  //pxtovw

  interface Vw {

    type: 'vw';

    options?: VwConfig;

  }

  //pxtorem

  interface Rem {

      type: 'rem';

      options?: RemConfig;

  }

  type Options = Vw | Rem;

```