Изменение шрифта по умолчанию в vuetify не работает (vue-cli 3) - PullRequest
Новая
       76

Изменение шрифта по умолчанию в vuetify не работает (vue-cli 3)

0 голосов
/ 07 ноября 2018

Мне известен вопрос change-default-font-in-vuetify в SO, но он не решает мою проблему, поскольку он был опубликован до выхода vue-cli-3, поэтому идеи здесь не применимы как таковые, официальные документы от Vuetify о том, как изменить темы и другие параметры не имеют никакого действительного шага, когда проект создается с помощью vue-cli 3.

Пока мои попытки идут так:
- vue create fooproject (используя конфигурацию по умолчанию, но даже если я не использую стандартную настройку, но cherrypick, что я хочу в проекте и выбираю препроцессор css в качестве стилуса вручную, он не будет работать)
- vue add vuetify
- он создает плагин dir: src / plugins, где он хранит vuetify.js
- добавить v-btn в компонент HelloWorld только для того, чтобы узнать, имел ли шрифт эффект
- Тогда я должен быть в состоянии импортировать ../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', нужно ли мне также добавить дополнительные зависимости загрузчика стилуса или что-то плюс? Потому что это именно то, что НЕ рекомендуется на сайте Vuetify.

Журнал ошибок: ошибок нет, я просто продолжаю указывать шрифт Roboto в кнопках материалов

Есть какие-нибудь замечания?

Другие попытки: Я пытался выполнить шаги, написанные Джейкобом Э. Доусоном , но, наверное, мне не хватает чего-то очень глупого.

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Так что я просто бросил быстрый и свежий взгляд на это, в конце концов, это было что-то глупое, если проект создается с помощью 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;
}
0 голосов
/ 08 ноября 2018

EDIT:
Возможно, что при импорте стилей из main.styl некоторые стили нарушаются:
https://github.com/vuetifyjs/vuetify/issues/3583

Все загружается, вы получаете какие-либо ошибки?

Кажется, это должно сработать, если, возможно, у вас нет опечаток или неправильных путей?
Например, stylus должно быть styles в вашем @require '~vuetify/src/stylus/main.styl'.

Должен ли я также добавить стилус-загрузчик?

Он уже должен быть добавлен для вас.

Если вы не выбрали конкретный препроцессор CSS (то есть стилус) во время установки vue-cli, вам нужно добавить его вручную
npm i -S stylus stylus-loader 

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