vite-plugin-import-css-per-file

This plugin will inject css into bundled js file using import statement per file like this:

// bundled first.js js file, with import css at top (if any)
import './first.css';
// rest of the file
// ...
// bundled second.js js file, with import css at top (if any)
import './second.css';
// rest of the file
// ...

Install:

npm i vite-plugin-import-css-per-file -D

Usage:

// vite.config.js
import importCssPerFile from 'vite-plugin-import-css-per-file';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // any other plugins
    importCssPerFile()
  ],
});

or with include/exclude options

// vite.config.js
import importCssPerFile from 'vite-plugin-import-css-per-file';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // any other plugins
    importCssPerFile({
      include: 'src/**/*', // Include all entry files
      exclude: 'src/utils/*', // Exclude entry files in the "utils" directory
    })
  ],
});

Note that this plugin will only work with library-mode and es format build.