如何在Nuxt3与Vite中高效添加全局Sass样式？

项目需要引入全局Sass样式，但暂未找到高效的添加方式，目前有两种常用的CSS添加方案：

方案一 #

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

            },
        },
    },

该方案基于Vite实现，但会将全局样式注入到每个组件中，导致项目构建后CSS代码重复出现，部分文件重复次数可达300次，此为Vite已知问题。

方案二 #

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

该方案不会将样式注入每个组件，但.vue文件中的常规scoped Sass在编译时无法识别全局Sass变量与混入。

内容的提问来源于stack exchange，提问作者Jean-Pierre Engelbrecht