如何使用Vue CLI 3版本在Vuetify中导入自定义字体

Question

我正在尝试在Vueitfy项目中包括自定义字体。 跟踪了许多资源，但没有一个起作用。即使使用!important

，Vueitfy也会覆盖我的样式

在我的App.vue中

<style lang="stylus">
  * {
        font-family: 'SofiaProSoftW01-Regular', Helvetica Neue, Roboto, Arial, sans-serif !important;
  }
</style>

在我的public / index.html

中

<link href="http://db.onlinewebfonts.com/c/47ff3156fe928e750d0468143555356f?family=SofiaProSoftW01-Regular" rel="stylesheet" type="text/css"/>

任何帮助将不胜感激。

Answer 1

要以Vuetify样式修改Vue CLI，

安装stylus-loader以使内部Webpack配置处理所有这些内容。

npm install -D stylus-loader stylus

1. 创建一个手写笔文件夹，将main.stylus文件存储在项目中，并将以下代码放入其中：

$body-font-family = 'YourFontName';

// main.styl
@import '~vuetify/src/stylus/main'; 

1. 将新的main.styl文件导入您的main.js：

import "./stylus/main.styl";