web-dev-qa-db-fra.com

Changer la police par défaut dans vuetify ne fonctionne pas (vue-cli 3) [Vuetify 1.X]

Je suis conscient de la question change-default-font-in-vuetify dans SO, mais cela ne résout pas mon problème car il a été publié avant la sortie de vue-cli-3, donc les idées il ne s'applique pas ici car cela, les documents officiels de Vuetify sur la façon de changer les thèmes et autres options n'ont pas d'étape valide pour quand le projet est créé avec vue-cli 3.

Jusqu'ici mes tentatives vont comme ceci:
- vue create fooproject (en utilisant la configuration par défaut, mais même si je n'utilise pas la valeur par défaut mais cherrypick ce que je veux dans le projet et sélectionnez manuellement le pré-processeur css comme stylet) ça ne marchera pas)
- vue add vuetify
- il crée un plugin dir: src/plugins, où il stocke vuetify.js
- ajoutez un v-btn dans le composant HelloWorld juste pour savoir si la police a eu un effet
- Alors je devrais pouvoir importer ../stylus/main.styl, où j'ai:

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

J'ai même essayé avec @import '~ vuetify/src/stylus/main', dois-je faire aussi vue ajouter des dépendances de chargeur de stylet supplémentaires ou quelque chose de plus? Parce que c'est exactement ce que ce n'est PAS recommandé sur le site Web de Vuetify.

Journal d'erreurs: pas d'erreurs, je continue de voir la police Roboto dans mes boutons matériels

Des remarques?

Autres tentatives: j'ai essayé de suivre les étapes écrites par Jacob E. Dawson mais il me manque probablement quelque chose de super idiot.

vuetify.jsvue-cli-3stylus-loader
7
sab

Je viens donc de jeter un coup d'œil rapide et frais à cela, à la fin c'était quelque chose de stupide, si un projet est créé avec vue-cli 3 (soit des choix personnalisés ou par défaut), alors évidemment dans le composant App.vue je devais sortez la famille de polices de la section style car elle écrase le 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;
}
5
sab

ÉDITER:
Il est possible que certains styles soient rompus lors de l'importation de styles depuis main.styl:
https://github.com/vuetifyjs/vuetify/issues/358

Est-ce que tout se charge, obtenez-vous des erreurs?

Il semble que cela devrait fonctionner, sauf si vous avez peut-être des fautes de frappe quelque part, ou des chemins incorrects?
Par exemple, stylus devrait être styles dans votre @require '~vuetify/src/stylus/main.styl'.

dois-je faire aussi vue ajouter un stylet-loader?

Il devrait déjà être ajouté pour vous.

Si vous n'avez pas sélectionné de préprocesseur CSS spécifique (c'est-à-dire un stylet) lors de l'installation de vue-cli, vous devez l'ajouter manuellement
npm i -S stylus stylus-loader

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