web-dev-qa-db-fra.com

utilisez les caractères locaux dans vue-cli 3

Je souhaite importer une police de caractères locale dans mon projet vue-cli 3.

Les fichiers .woff et .woff3 sont dans src/assets/typo et je les inclut dans src/scss/_typo.scss:  enter image description here

Mon _typo.scss ressemble à ceci:

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Bold.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Medium.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Medium.woff') format('woff');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Et voici ma vue.config pour utiliser les couleurs et la police de caractères globalement:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_colors.scss";
          @import "@/scss/_typo.scss";
        `
      }
    }
  }
};

Lorsque j'exécute mon projet, le message d'erreur suivant s'affiche:

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './@/assets/typo/HKGrotesk-Bold.woff' in '/Users/robin/Documents/Code/2018/iamrobin-portfolio/src'
vue.jsfont-facevue-cli
4
iamrobin.

Je ne suis pas sûr que cela aide à ce stade, mais le problème est le même et je l’ai résolu en utilisant des chemins relatifs (c.-à-d. ../assets/fonts/myfont.woff) plutôt qu’en utilisant le caractère générique racine (c.-à-d. @/assets/fonts/myfont.woff ou @~/assets/fonts/myfont.woff).

J'espère que ça vous aide!

1
Croot

Avec vue-cli 3, Webpack 4 et les chargeurs par défaut travaillent pour vous. Vous n'avez donc pas besoin de configurer de chargeur pour une telle tâche. La seule chose à faire est de créer un fichier main.scss dans votre dossier scss. Dans ce fichier, importez vos _color.scss et _typo.scss. Ensuite, dans votre main.js, importez votre fichier de style principal comme import './stylus/main.scss';. Avec ça, vous devriez être prêt à partir. Utilisez simplement votre police dans votre css comme body {font-family: "HKGrotesk", sans-serif;}, par exemple. N'oubliez pas de supprimer votre chargeur CSS de vue.config pour ne pas interférer avec le comportement par défaut de Webpack.

1
dalvallana