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

Posted 2023-02-22

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

【英文标题】：Change default font in vuetify is not working (vue-cli 3) [Vuetify 1.X]

【发布时间】：2019-04-11 00:08:43

【问题描述】：

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

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

vue create fooproject（使用默认配置，但即使我不使用默认配置，而是在项目中挑选我想要的东西并手动选择 css-preprocessor 作为手写笔它也不起作用）

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 = '蒙特塞拉特'，无衬线； @import '~vuetify/src/stylus/main'

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

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

有什么意见吗？

其他尝试： 我尝试按照Jacob E. Dawson 编写的步骤进行操作，但我可能遗漏了一些超级愚蠢的东西。

编辑： 当时来自 media 的链接文章并未说明截至 2019 年 9 月它的范围不限于特定的 Vue 版本。

【问题讨论】：

有人应该告诉 Jacob 发布代码以及代码的屏幕截图（或者根本没有屏幕截图），哈哈。

大声笑我100%同意，根据图像重写代码真的很烦人。

【参考方案1】：

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

---

一切都加载了吗，你有什么错误吗？

它似乎应该可以工作，除非你在某处有一些拼写错误或不正确的路径？ 例如，stylus 应该是 styles 在您的 @require '~vuetify/src/stylus/main.styl' 中。

我是否还需要添加 stylus-loader？

它应该已经为你添加了。

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

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

【讨论】：

嗨@Traxo，实际上我什至用 vue-cli 3 从头开始​​了一个项目（即使在不同的电脑，ubuntu 16 和 18 中），这很奇怪，因为如果我必须添加 stylus-loader和其他步骤，那么使用 Vuetify 官方页面上所述的插件并与他们在那里所说的相反，我发现相关问题没有其他人的答案。实际上不，stylus 实际上是 vuetify 模块中该文件夹的名称，我可以直接在那里调整我需要的东西，但根本不推荐。

@sab stylus-loader 可能已经在您的package.json 中了。所以不需要手动添加它（如果没有那么你需要添加它，当你使用 vue-cli 时，有一个步骤会要求你提供 css 选择器，也许你没有通过default 选项得到它，也许描述确切脚步）。但是你有什么错误吗？您是否包含了您的 main.styl 文件 import './stylus/main.styl'（路径取决于您导入的位置）？

最后，当您不遵循 [Vuetify guide with vue-cli 3](vuetifyjs.com/en/style/theme) 时，它会起作用：使用 npm 手动安装 stylus-loader，进入 webpack 模块和调整它并基本上破坏了cli 3插件管理的目的。我需要一种通过 cli3 使用它的方法，而不必这样做，我希望这是我的错，但文档对那部分不起作用。

@sab 啊，那么我会删除这个答案。我不确定您在安装过程中选择了哪些选项，但默认安装应该为您提供stylus-loader（除非最近发生了变化，我对此表示怀疑）。因此，请尝试提供答案中的所有步骤。因为我不确定你为什么会遇到问题。

@sab 关于手写笔样式的问题很少：github.com/vuetifyjs/vuetify/issues/3583 不知道将来如何解决。

【参考方案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;

【讨论】：

最简单的方法！

【参考方案3】：

这对我使用 nuxt 2.15.8 有用。

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

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

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