vue3 #appより上の要素にcssをつけたい

vue初心者です。

はまったこと

vuecliを使ってsfcプロジェクトを作成。
html,bodyにheight:100%を指定したいが何故かcssが反映されない。

やってしまっていたこと

① ↓vue.config.jsでプロジェクト全体で使いたい共通scss(common.scss)を読ませるようにした。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/common.scss";
        `,
      },
    },
  },
};

② ↓common.scssに共通のcssを記述

html {
  font-family: ~~~
  height: 100%;
}
body {
  height: 100%;
}
#app {
  height: 100%;
}

③↓App.vueのstyleをscopedにする

<style lang="scss" scoped>
.home{
}
</style>

これをすると、③のscopedが影響しているのか、common.scssに記述した#appより上の階層のhtmlやbodyのcssが適用されなくなった。

解決するには

• App.vueでscopedを使わない。
• htmlやbodyなど、#appより上の階層の要素のcssはApp.vueに記述する。

↓App.vue

<style lang="scss">
html {
  font-family: ~~~
  height: 100%;
}
body {
  height: 100%;
}
#app {
  height: 100%;
}
</style>

↓common.scssにはhtml,body以外のa要素のスタイルなどを書く

a,
a:hover,
a:active,
a:visited {
}

これとは違う、vueプロジェクトならこうしておきな！っていうベストプラクティスがあるのかもしれません。
勉強中です。
違う方法を覚えたらまた改めて記事にしたいです。
つっこみがありましたらコメントいただけますと嬉しいです。