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