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

Question

我知道这个问题 in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options 使用 vue-cli 3 创建项目时没有任何有效步骤。

到目前为止我的尝试是这样的：

vue create fooproject（使用默认配置，但即使我不使用默认配置，但在项目中挑选我想要的东西和 select 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 编写的步骤进行操作，但我可能遗漏了一些超级愚蠢的东西。

编辑：当时来自 medium 的链接文章没有说明它不适用于截至 2019 年 9 月的特定 Vue 版本。

Answer 1

编辑：
从 main.styl:
导入样式时，某些样式可能会损坏 https://github.com/vuetifyjs/vuetify/issues/3583

是否加载了所有内容，您是否遇到任何错误？

它似乎应该可以工作，除非你在某处有错别字或路径不正确？
例如 stylus 在你的 @require '~vuetify/src/stylus/main.styl'.

中应该是 styles

do I have to do also vue add stylus-loader?

应该已经为您添加好了。

如果你在安装vue-cli时没有select特定的CSS预处理器（即stylus），那么你需要手动添加它
npm i -S stylus stylus-loader

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}

Answer 2

所以我只是快速而新鲜地回顾了一下，最后它是一些愚蠢的东西，如果一个项目是用 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;
}

Answer 3

这对我有用nuxt 2.15.8。

将此添加到您的 nuxt.config.js

vuetify: {
    treeShake: true,
    defaultAssets: {
      font: {
        family: "Inter",
      },
      icons: "mdi",
    },
}

如果您需要不同的字体粗细，您可能需要在 CSS 中手动导入它们，或者在 HTML

中手动导入它们

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

Change default font in vuetify is not working (vue-cli 3) [Vuetify 1.X]

vue.js

vuetify.js

vue-cli-3

stylus-loader