vite

Vite has built-in support for many of the needs for CSS-bound frontend development. For example, it has full support for , so if you want to do any CSS transformation you simply have to configure the appropriate plugin, without having to install PostCSS.

For this you need to import the CSS that you want to be processed from your Javascript code.

import ‘./style.css’

Although in theory from Javascript it would not be possible to import CSS code as it is, thanks to Vite that CSS code will be processed and extracted from the Javascript code. It will place it in turn in a CSS file in the final project, once you do the build, and in the development stage for agility it will inject it directly into the HTML.

Also, vite will do CSS minification by default, to reduce the weight of the code resulting from its compilation.

Import CSS

Vite has already configured from home, without you needing to do anything special, the grouping or bundling system of all the CSS code that has been imported from other CSS files, so that, when the build is done, a single CSS file is linked .

Thanks to imports we can write the CSS code in separate files, so maintenance is much easier. Thanks to the packaging and compaction, a better optimization will be obtained, because only one request to the server will be necessary to obtain the CSS and on top of that it will weigh less.

The way to import the CSS is the same as it is done in the language standard:

@import ‘./css/info-box.css’;

Other PostCSS plugins

We can also add any PostCSS plugin to perform transformations in the code. For this we need to create the postcss.config.js file and do all the configuration, .

However with Vite we have to be careful with one thing:

• The postcss.config.js file understands that you are going to use the imports for “ES Modules”, from the Javascript standard.
• If you want to use the CommonJS modules you would need to name the file as postcss.config.cjs

Support for preprocessors

Vite also has support for preprocessors, like , Stylus…

You only need to install the npm package needed to perform CSS preprocessing. For example, if you plan to work with Sass you would have to install this package:

npm add -D sass

Of course, for Vite to know that it has to do CSS preprocessing with Sass you would need the root file of your CSS code to have a “.scss” extension.

import ‘./style.scss’