unplugin-px-to-rem


transform px to rem, you can specify the directory you want to convert to

Usage

| options | desc | type | default |
| -------- | ------------------------------ | -------- | ------- |
| endWith | files type | string[] | [] |
| exclude | directory that is not included | string[] | [] |
| dirs | directory that is included | string[] | [] |
| fontBase | conversion ratio | number | 16 |

Install

``bash
npm i unplugin-px-to-rem -D
`



Vite

`ts
// vite.config.ts
import UnpluginPxToRem from 'unplugin-px-to-rem/vite'

export default defineConfig({
plugins: [
UnpluginPxToRem ({ / options / }),
],
})
`

Example: playground/








Rollup

`ts
// rollup.config.js
import UnpluginPxToRem 'unplugin-px-to-rem/rollup'

export default {
plugins: [
UnpluginPxToRem ({ / options / }),
],
}
`








Webpack

`ts
// webpack.config.js
module.exports = {
/ ... /
plugins: [
require('unplugin-px-to-rem/webpack')({ / options / })
]
}
`








Nuxt

`ts
// nuxt.config.js
export default {
buildModules: [
['unplugin-px-to-rem/nuxt', { / options / }],
],
}
`

> This module works for both Nuxt 2 and Nuxt Vite








Vue CLI

`ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-px-to-rem/webpack')({ / options / }),
],
},
}
`

Example: playground2/








esbuild

`ts
// esbuild.config.js
import { build } from 'esbuild'
import UnpluginPxToRem from 'unplugin-px-to-rem/esbuild'

build({
plugins: [UnpluginPxToRem ()],
})
``