@zentus/vite-nice-css-plugin
v0.0.10
Published
A Vite plugin that allows CSS to be written in Vite React components, and compiled to a bundle.css file in production, and use inline styles in development
Readme
@zentus/vite-nice-css-plugin
Installation
npm install --save-dev @zentus/vite-nice-css-plugin
Usage
Add the plugin in your vite.config.js
import react from '@vitejs/plugin-react'
import viteNiceCssPlugin from '@zentus/vite-nice-css-plugin'
export default defineConfig({
plugins: [
react(),
viteNiceCssPlugin()
]
})Import bundle.css in your index.html
<head>
<link rel="stylesheet" type="text/css" href="/bundle.css" />
</head>Use it in your app like so
const styles = {
container: `
display: flex;
`
}
const MyComponent = () => {
return <div className={styles.container}/>
}If you want to lint "styles" objects, you can use @zentus/eslint-plugin-vite-nice-css-plugin
Installation
npm install --save-dev @zentus/eslint-plugin-vite-nice-css-plugin
Usage
Add the plugin to your .eslintrc.js
module.exports = {
plugins: ['@zentus/vite-nice-css-plugin'],
rules: {
'@zentus/vite-nice-css-plugin/css-template': 2
}
}