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
npm i unplugin-px-to-rem -D
Vite
// vite.config.ts
import UnpluginPxToRem from 'unplugin-px-to-rem/vite'
export default defineConfig({
plugins: [
UnpluginPxToRem ({ /* options */ }),
],
})
Example: playground/
Rollup
// rollup.config.js
import UnpluginPxToRem 'unplugin-px-to-rem/rollup'
export default {
plugins: [
UnpluginPxToRem ({ /* options */ }),
],
}
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-px-to-rem/webpack')({ /* options */ })
]
}
Nuxt
// nuxt.config.js
export default {
buildModules: [
['unplugin-px-to-rem/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-px-to-rem/webpack')({ /* options */ }),
],
},
}
Example: playground2/
esbuild
// esbuild.config.js
import { build } from 'esbuild'
import UnpluginPxToRem from 'unplugin-px-to-rem/esbuild'
build({
plugins: [UnpluginPxToRem ()],
})