I’m trying to create a build file where I have two styling. One is for the theme and one is for the global styles.

I’m wondering why the global styles and the content of the themes styles is not being added to final styles.css inside the dist folder.

vite.config.ts

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @import "@/assets/themes/style.css";
        @import "@/assets/css/styles.css";
      `,
      },
    },
  },

dist/style.css

.header[data-v-de140e0f]{.... styles here}

// But I do not see the variables inside the assets/css and assets/themes here

assets/css/styles.css

@import "./variables/_base.css";
@import "./elements/_base.css";
@import "./media-queries/media-queries.css";

E.g. of css inside the variables:

:root {
  --z-index-header: 3;
}

themes/css/style.css

:root {
  --theme-color-brand-one: #010101;
}

What do should I do with this?