vuetify.js - 在 vuetify 中更改默认字体不起作用 (vue-cli 3) [Vuetify 1.X]

Question

我知道这个问题 change-default-font-in-vuetify在 SO，但它没有解决我的问题，因为它是在 vue-cli-3 出现之前发布的，所以那里的想法在这里并不适用，官方文档来自 Vuetify on how to change themes and other options使用 vue-cli 3 创建项目时没有任何有效步骤。

到目前为止，我的尝试是这样的:
- vue 创建 fooproject(使用默认配置，但即使我不使用默认配置，而是在项目中选择我想要的内容并手动选择 css 预处理器作为手写笔，它也不起作用)
- vue 添加 vuetify
- 它创建一个插件目录:src/plugins，它存储 vuetify.js
- 在 HelloWorld 组件中添加一个 v-btn 只是为了知道字体是否有效
- 然后我应该能够导入../stylus/main.styl，我有:

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

我什至尝试过 @import '~vuetify/src/stylus/main' ，我是否还需要添加额外的 stylus-loader 依赖项或其他任何东西？因为这正是 Vuetify 网站上不推荐的。

错误日志:没有错误，我只是在我的 Material 按钮中看到 Roboto 字体

有什么备注吗？

其他尝试:
我试着按照 Jacob E. Dawson 写的步骤操作但我可能错过了一些非常愚蠢的东西。

Answer 1

所以我只是快速而新鲜地回顾了这一点，最后它是愚蠢的，如果一个项目是用 vue-cli 3(自定义选择或默认)创建的，那么显然在组件 App.vue 中我必须从样式部分取出字体系列，因为它会覆盖 CSS:

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}