web-dev-qa-db-fra.com

Vue cli et vuetify comment utiliser avec la police Roboto locale

J'ai une Vue/Vuetify application en cours de développement créée avec la VUE CLI 3.x et je souhaite servir la police Roboto localement, pas via Google cdn.

Quelqu'un a-t-il accompli cela via le webpack et le projet d'application vuetify généré par vue cli et si oui, comment avez-vous procédé?

vue.jswebpackvuetify.jsroboto
7
JohnC

Premier package d'installation typeface-roboto dans votre projet.

Importez-le ensuite dans votre fichier main.js/index.js/boot.js ou autre:

import 'typeface-roboto/index.css';

Enfin, mettez à jour votre webpack.config.js pour autoriser l'utilisation des types de fichiers de police dans les règles du module, à savoir:

    module: {
        rules: [
            //other stuff
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },

Les types de fichiers de police sont woff, woff2, eot et ttf.

5
SnakeyHips

Avec Vue CLI 3 + Vuetify:

  • installez typeface-roboto

    npm install --save-dev typeface-roboto

  • dans public/index.html, retirer

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

  • dans src/App.vue, ajouter

    <style lang="sass">
  @import '../node_modules/typeface-roboto/index.css'
</style>
0
Sylvain Lesage