Image

lightning-fast-builds-with-vite

2 min read
Last update: December 19, 2021

CSS & Debugging

A lot of projects use PostCSS for transforming styles with JS plugins (tailwind uses this for example). Vite already uses PostCSS 8 out of the box, so if you want to use any PostCSS plugin, all you need to do is install it like so:

$ npm install postcss-nesting

Then I can just create a file called postcss.config.js, which is included by Vite. In there I can include configuration:

module.exports = {
plugins: [
require('postcss-nested')
]
}

We just have to restart the server, and CSS nesting should now work for us.

Debugging

Because Vite uses individual ES Modules, you can use the browser network dev tools tab to do debugging. You can look at the code that has been transcoded by Vite into plain JavaScript. We can even set JavaScript breakpoints, and inspect the CSS which has been transpiled into JavaScript.

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1.opt.1627575868123.jpg?alt=media&token=3617e9c2-9ca5-4d66-b3b8-f587f21ac134

CSS Modules

Vite also allows for CSS Modules, so we could add a file called example.module.css. As long as the file ends in module.css

I can then import this from my main.js like so:

import styles from `./example.module.css`

The way CSS modules work . It gives each CSS selector it’s own hashed scope, so it doesn’t conflict with any other CSS selectors. The CSS selectors in this file then can be used as variables like styles.title, and Vite will properly use the correct hashed selector.

Pre-Processors like SASS or LESS

Both SASS and LESS work out of the box with Vite. I just need to run npm install SASS. There is no need to do any additional configuration. I can rename my CSS file to .scss and it just works, even with hot reloading.