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

Question

我知道更改-默认字体在SO中的问题，但它并没有解决我的问题，因为它是在vue-cli-3发布之前发布的，所以那里的想法在这里不适用，关于如何改变主题和其他选项的讨论的官方文档在使用vue-cli 3创建项目时没有任何有效的步骤。

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

• vue创建fooproject (使用默认配置，但即使我不使用默认但cherrypick项目中的内容，并手动选择css-预处理器作为手写笔)
• vue加vuetify
• 它创建一个插件dir: src/plugins，其中存储vuetify.js
• 在HelloWorld组件中添加一个v-btn，仅仅是为了知道字体是否有效果。
• 然后，我应该能够导入../stylus/main.styl，其中我有： @import‘~vuetify/src/触控笔/设置/_变量’$body-Open族= 'Open Sans'，sans-serif；$头-字体-家族=‘蒙特塞拉特’，sans-serif；@import‘~vuetify/src/主

我甚至尝试使用@import‘~vuetify/src/触控/main’，我是否也必须添加额外的手写加载程序依赖项？因为这正是网站上不推荐的。

错误日志:没有错误，我只是继续在我的材料按钮中设置机器人字体。

有什么评论吗？

其他尝试:我试图遵循雅各布·道森编写的步骤，但我遗漏了一些非常愚蠢的东西。

编辑:截至2019年9月，来自媒体的链接文章没有指定其作用域为特定的Vue版本。

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;
}

Answer 2

编辑：

从main.styl导入样式时，可能会出现某些样式中断的情况：

https://github.com/vuetifyjs/vuetify/issues/3583

所有的东西都装上了吗，你有什么错误吗？

这似乎是可行的，除非你可能在某个地方有一些排字，或者不正确的路径？

例如，stylus应该是@require '~vuetify/src/stylus/main.styl'中的styles。

我也要做vue添加手写输入器吗？

它应该已经为你添加了。

如果在vue-cli安装过程中没有选择特定的CSS预处理程序(即手写笔)，则需要手动添加它。

npm i -S stylus stylus-loader

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

Answer 3

这对于我使用nuxt 2.15.8是有效的。

将此添加到nuxt.config.js中

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

​

​

如果您需要不同的字体权重，您可能必须在CSS或HTML中手动导入它们。