Build/bundle separate CSS files

[andilem]

I'm using Vue and want to switch the app theme dynamically between two themes.
Each theme is defined in a single CSS file (located somewhere in node_modules) and must be applied globally.
My idea was to add a <link ...> element in index.html and change the href from code.
But, of course, this only works in development mode, and when building the app, the default theme gets merged into the (single) css and the other files are not available anymore.

How can I change the Vite build process to either

• procude two merged css files (one for each theme) or
• don't merge the theme files into the app css, but copy them separately into the dist folder

so that I can apply them afterwards?

[CHOYSEN]

My idea was to add a <link ...> element in index.html and change the href from code.

don't merge the theme files into the app css, but copy them separately into the dist folder

You can copy these css files to public folder, Vite will not process them.

[andilem]

Thank you, that should indeed work. But then I have to do this everytime I update the dependency which includes the theme files, because they could have changed. Is there another way to do this automatically during the build process?