css-module syntactic sugar for vue3
npm install vite-plugin-vue-css-moduleProvides Vue3 cssModule syntax sugar so that you don't have to write $style. again and again. You just need to write the code like a normal class attribute. It supports the Vue default template and the Pug template.
Before using it, you might have written something like:
``html`
After using it, you no longer need to repeat the $style., you just need to write this:
In the Vue default template
`html`
In the Pug template
`html`
div(cls="red")
div(:cls="[type === 'red' && 'red', 'red--active']")
div(:cls="{ red: type === 'red', [type + '--active']: true }")
Now, let's use it!
vite-plugin-vue-css-module works in vue3 and vite.
Install with npm:
`bash`
npm i --save-dev vite-plugin-vue-css-module
First, add the configuration in the vite.config.js file
`js`
// vite.config.js
import vueCssModule from 'vite-plugin-vue-css-module'
export default defineConfig({
plugins: [
vueCssModule({
// By default, it is "cls", but you can change it to another name. However, it is better to use a unique name.
attrName: 'cls'
}),
vue()
],
})
Then, use it in the **.vue file.
- Add 'module' to the style tag to enable css-module
- In the template, use the 'attrName' value you set (the default is 'cls' ) to write the class name
`html
vite-plugin-vue-css-module
vite-plugin-vue-css-module
vite-plugin-vue-css-module
`
In addition, if you are using the pug template, the writing method is exactly the same.
> Note:
> - This syntax sugar is currently only supported in or .
> - The plugin will only find the first style tag that uses module and then use its name, which defaults to $style. In fact, setting a custom name such as
`
Install dependencies:
`sh`
pnpm install
Run tests:
`sh`
pnpm test
Build release:
`sh``
pnpm build
MIT