Dynamic import vite css

I have a theme option I capture via API call. I want this theme to correspond with css files (or combinations of them) I have created in the Vue 3 app (using vite).

These theme files I would like to 'layer' so I can have base.css, and style5.css which would append to that.

I'm also using tailwind.

main.pcss

/* tailwind base */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

The current way I'm doing this (below) I don't like it for several reasons, but it was the only way I could get it working where the CSS would import properly, and would not cause a FOUC. I want the component and the css to load together.

So these are the things I'm hoping to achieve

1. No FOUC as the sheets load in the order I specify
2. They use global class styles (not scoped), compiled by tailwind with @apply, etc.
3. I would love to remove the component entirely and just import CSS files, to remove this layer of indirection, but when I tried that with yarn build the layout had none of css applied.
4. Should multiple separate css files I can combine, like base.css, style1.css style1.css, style2.css (if I want to make 1 tweak to style 1). As you see below I can't layer them, they just have to be copy pasted in full which is obviously not ideal
5. I want to make sure each 'theme' (group of css) is bundled and not all themes are bundled together (for file size reasons). This is why im using the async component

My layout component

<template>
  <component v-if="theme" :is="themeComponent">
    <slot />
  </component>
</template>

<script>
import { computed, defineAsyncComponent } from 'vue';
import { useStore } from '@/store';

export default {
  setup() {
    const store = useStore();
    const theme = computed(() => store.theme);

    const themeComponent = defineAsyncComponent(() => {
      if (theme.value === 'STYLE_1') return import('@/themes/Style1.vue');
      if (theme.value === 'STYLE_2') return import('@/themes/Style2.vue');
      return import('@/themes/StyleDefault.vue');
    });

    return {
      theme,
      themeComponent,
    };
  },
};
</script>

Here is my Style1.vue component:

<template>
  <slot />
</template>

<style>
/* font */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* base */

body {
  @apply text-slate-800 bg-white;
  font-family: 'Inter', sans-serif;
}
.link {
  @apply hover:underline;
}
.wrapper {}
.container {
  @apply px-4 mx-auto max-w-[750px];
}
.header {
  @apply bg-gray-50;
}
.content {
  @apply pb-20 border-t-2 border-b-2 border-blue-300 ;
}
...

You can import your CSS file directly:

if (theme.value === 'STYLE_1') {
   import('@/assets/styles/style1.scss')
}

But, since you import your CSS dynamically, there is no way to avoid FOUC. Because the CSS is loaded after JS and after the DOM loaded