How to efficiently add global css using nuxt3 and vite?

Question

I have global sass being included in my project and i cant find an efficient way to add it to the project.

there seems to be 2 popular ways to add css in 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 generate my project, i can see my css is repeated multiple times, some files as much as 300 times. the issue is found here on vites side https://github.com/vitejs/vite/issues/4448

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

the above option seems to not do it for every component, but normal scoped sass in .vue files doesnt pick up sass variables and mixins on compilation using this method

Answer 1

using additionalData adds it to every page. this item is only meant for mixns and vars, which dont translate into permanent css when built.

basically use only vars in mixins in additionalData then use your global.scss in in css