Skip to content

Commit

Permalink
Add additional config to Vite docs
Browse files Browse the repository at this point in the history
  • Loading branch information
devongovett committed Sep 17, 2023
1 parent bade9d3 commit b645c7f
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions website/pages/docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,27 @@ module.exports = {

## With Vite

Vite supports Lightning CSS out of the box.

First, install Lightning CSS into your project:
Vite supports Lightning CSS out of the box. First, install Lightning CSS into your project:

```shell
npm install --save-dev lightningcss
```

Then, set `'lightningcss'` as CSS transformer in your Vite config.
Then, set `'lightningcss'` as CSS [transformer](https://vitejs.dev/config/shared-options.html#css-transformer) and [minifier](https://vitejs.dev/config/build-options.html#build-cssminify) in your Vite config. You can also configure Lightning CSS options such as targets and css modules via the [css.lightningcss](https://vitejs.dev/config/shared-options.html#css-lightningcss) option in your Vite config.

```js
// vite.config.ts
import {browserslistToTargets} from 'lightningcss';

export default {
css: {
transformer: 'lightningcss',
lightningcss: {
targets: browserslistToTargets(browserslist('>= 0.25%'))
}
},
build: {
cssMinify: 'lightningcss'
}
};
```
Expand Down

0 comments on commit b645c7f

Please sign in to comment.