Как импортировать пользовательский шрифт в Vuetify, используя версию Vue CLI 3

Question

Я пытаюсь включить пользовательский шрифт в проект Vueitfy. Следил за многими ресурсами, но ни один из них не работал. Vueitfy переписывает мои стили, даже если используется !important

В моем App.vue

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

В моем публичном / 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, чтобы внутренняя конфигурация веб-пакета обрабатывала их все.

npm install -D stylus-loader stylus

1. Создание стилусапапку для хранения main.stylus файла внутри проекта и вставьте в него код:

$body-font-family = 'YourFontName';

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

Импортируйте новый файл main.styl в ваш main.js:

import "./stylus/main.styl";