Is there a way to prevent Vite from merging CSS files imported with <link /> in index.html?

[umajho]

Hello.

I'm using ShadowRoot, and I have the need to adopt some (not all) global styles to shadow DOMs.

example: https://stackblitz.com/edit/vitejs-vite-orv9nq?file=index.html (using SCSS)

npm run dev works as expected because CSS files are not merged during dev.

npm run build && npm run preview doesn't work, because CSS files have been merged into a single file, and the element link#bgRed has gone.

Vite option build.cssCodeSplit has nothing to do with this situation. I set it to true in the example.

---

There are indeed workarounds (and I'm using the first one for now), but they all have drawbacks:

• loading global styles using JavaScript, so that they can be separated: FOUC.
• keeping global styles the current way, and at the same time using import statement to import them in code again: style content will be downloaded twice.

[umajho]

If currently there is no way to achieve that, should I open a feature request issue?