Как эффективно добавить глобальный css с помощью nuxt3 и vite?

У меня есть глобальный sass, включенный в мой проект, и я не могу найти эффективный способ добавить его в проект.

кажется, есть 2 популярных способа добавить css в ваш проект.

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

            },
        },
    },

использование vite, кажется, работает, но оно также, кажется, внедряется в каждый компонент, который я использую, поэтому, когда я создаю свой проект, я вижу, что мой css повторяется несколько раз, а некоторые файлы - до 300 раз. проблема находится здесь, на стороне сайта https://github.com/vitejs/vite/issues/4448

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

вышеприведенный вариант, кажется, не делает это для каждого компонента, но sass с обычной областью действия в файлах .vue не собирает переменные sass и миксины при компиляции с использованием этого метода.