Efficiently add global CSS using Nuxt 3 and Vite

Question

I have global sass included in my project, but I can't find an efficient way to add it to my project.

There seem to be two popular ways to add css to your project.

vite: {
    plugins: [svgLoader()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                  @import "~/assets/styles/main.scss";
          `,

            },
        },
    },

Using vite seems to work, but it also seems to inject itself into every component I use, so when I build the project I can see my css repeated multiple times, some files up to 300 Second-rate. The issue was found on the vites side https://github.com/vitejs/vite/issues/4448

css: ["@/assets/styles/main.scss"],

The above options don't seem to do this for every component, but normal scoped sass in .vue files does not pick up sass variables and mixins when compiling with this method

Answer 1

Use additionalData to add it to every page. This project only works with mixns and vars, which are not converted to permanent css on build.

Basically just use vars in the mixins in additionalData, and then use your global.scss in css