0.0.3 • Published 3 years ago
vite-plugin-classname v0.0.3
vite-plugin-classname
A quick plugin to register className prefixes, this eliminates the need for component library authors to define an additional prefix variable in both the JS and CSS sections.
It is better to prevent class name conflicts in your component library
Install
$ pnpm add vite-plugin-classname -D
// vite.config.ts
import { defineConfig } from 'vite';
import { VitePluginClassName } from 'vite-plugin-classname';
export default defineConfig({
plugins: [
VitePluginClassName({ prefixClassName: 'demo' })
]
})
Usage
It will process CSS files by default
If you use CSS preprocessors, you'll need to configure them a little extra
Set the prefix class name
VitePluginClassName({
prefixClassName: 'demo',
})
Use sass
VitePluginClassName({
prefixClassName: 'demo',
cssSuffix: ['.sass']
})
Use scss
VitePluginClassName({
prefixClassName: 'demo',
cssSuffix: ['.scss']
})
Use less
VitePluginClassName({
prefixClassName: 'demo',
cssSuffix: ['.less']
})
Use styl
VitePluginClassName({
prefixClassName: 'demo',
cssSuffix: ['.styl']
})