Vite+Vue compile styles into a CSS that never gets loaded

[WhyNotHugo]

I mount components into my pages with this main.ts:

import { createApp } from "vue";
import PhotoManager from "./components/PhotoManager.vue";

createApp(PhotoManager).mount("#photo-manager");

My components are all defined as Vue SFC, and they each have their corresponding <style> section.

I include main.${hash}.js and main.${hash}.css via the manifest into my HTML files (this is done with some django glue code; it works and URLs in the source point to the right files which load correctly).

In the above case, most of the styles used by components are compiled into main.${hash}.css. I have a couple of entry points like this which each mount a different "root" component. Each of them are defined in vite.config.js's defineConfig under build.rollupOptions.input like so:

export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input: {
        main: "src/main.ts",
        editor: "src/editor.ts",
        admin: "src/admin.ts",
        // ...
      },
    },
  },
  plugins: [vue(), svgPlugin({ optimize: true })],
});

However, for components that I reuse across different entry points, the styles are compiled into separate css files. E.g.: ExifDetector-a8c268f5.css includes styles for two components named RangeSlider andExifDetector. The problem is that the generated js code does not in any way load this css files.

Additionally, the criteria for splitting css isn't totally predicable. Apparently the two components that I mentioned above are both reused across the same pair of entry-points, so Vite (i think?) decides to put the separate from everything else, but in the same file.

How can I work around this?

[haoqunjiang]

Answered at #9347 (comment)