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