Vue-Cliでscssのグローバル変数を使いたい

Question

実現したいこと

Vue-CliのプロジェクトでScssのグローバル変数を使いたいです。
またリセットCSSをコンポーネント全体に適用させたいです。

発生している問題・エラーメッセージ

グローバル変数は hello/src/assets/sass/abstracts/_variables.scss にて宣言し、
hello/src/assets/sass/prepend.scssで@useしてvue.config.jsに登録しているのですが、画面上ではundefinedとなってしまいます。
更にhello/src/assets/sass/base/_reset.scssでリセットcssを読み込んでいるのですが、すべてのコンポーネントの<style>にscopedを記述するとスタイルが適用されなくなります。どれか一つでもscopedを外すとreset.scssが適用されるのも理由が全くわかりません。

該当のソースコード

ソースコード量が多いのでgithubを共有させていただきます。
https://github.com/kanta1108/vue-test

試したこと

ネットにはvue.config.jsに

css: {
    loaderOptions: {
      scss: {
        prependlData: `
        @use "@/assets/sass/prepend.scss";
        `,
      },
    },
  },

と記載すると多く書かれていましたが、prependDataというオプションは存在しないとエラーが出てしまいました。

お力をお貸しいただければと思います。よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

vue3.2.13
@vue/cli 5.0.8
sass-loader10.4.1

Answer 1

自己解決しました。
sass-loaderを8系にダウングレード、additionaldataをprependDataに変更しsassの読み込みを@useから@importに記載したら読み込まれました。