全局样式被用户代理样式表覆盖

Question

我是Vue.js的新手，但是样式方面存在问题。我想对大多数组件使用范围样式，但是我仍然想共享一些常见的CSS规则，例如font-family。

为此，我在public文件夹中创建了一个CSS文件，并将其链接到index.html中。该样式已在我的组件中正确继承，但是它们已被用户代理样式表覆盖。

当我为我的根组件使用范围样式并将字体系列设置为由子组件继承时，也会发生同样的情况。

例如，这是我的根组件的样式块：

<style scoped>
#app {
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Nunito;
  background: linear-gradient(to bottom right, #232526, #414345);
}
</style>

下面是Chrome如何解释CSS的记录。顶部是我的子组件样式（.spotify-button），底部是我的根组件样式（#app）。

我应该如何在各个组件之间共享样式？