unpluginunplugin-lightningcss 
Lightning CSS integration for Vite, Rollup, esbuild, Webpack, Vue CLI, and more.
Installation
npm i -D unplugin-lightningcss
<summary>Vite</summary>
ts
// vite.config.ts
import LightningCSS from 'unplugin-lightningcss/vite'
export default defineConfig({
plugins: [LightningCSS()],
})
<summary>Rollup</summary>
Since Rollup does not support CSS out of the box, you need to use a CSS plugin like
Since Rollup does not support CSS out of the box, you need to use a CSS plugin like
rollup-plugin-css-only.
ts
// rollup.config.js
import css from 'rollup-plugin-css-only'
import LightningCSS from 'unplugin-lightningcss/rollup'
export default {
plugins: [LightningCSS(), css()],
}
<summary>esbuild</summary>
ts
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [require('unplugin-lightningcss/esbuild')()],
})
<summary>Webpack</summary>
ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-lightningcss/webpack')()],
}
Example
import { Features } from 'lightningcss'
export default {
plugins: [
LightningCSS({
options: {
include: Features.Nesting,
},
}),
],
}
Sponsors
