Vite: CSS imports

How does Vite handle .css imports?

If you import a .css file from a JavaScript or Typescript file, its contents will be added to the page via a <style> tag with HMR support.

For example, if you had this main.ts file that was included in your index.html file:

import './style1.css'
import './style2.css'

// more code

Then, Vite will inject two <style> tags for those files:

How does Vite handle PostCSS?

If your project contains a valid PostCSS config (any format supported by postcss-load-config, e.g. postcss.config.js), Vite will apply the config to all imported CSS.