web-dev-qa-db-fra.com

Comment ajouter une police dans le projet Vue.js

J'ai un projet avec Laravel et Vue.js et j'utilise scss. Je veux ajouter une nouvelle police dans mon projet et je ne peux pas le faire. Je crée le fichier fonts.scss, crée un variable avec police

@font-face {
  font-family: "Proxima Nova Bold";
  src: url(/Proxima-Nova-Bold.otf);
}

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

Et j'ai une erreur de console GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

Voici comment importer un fichier scss dans le composant Vue

@import '../../../fonts/fonts.scss';

Voici mon laravel mix

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

Où ai-je fait erreur? Ou dites-moi comment ajouter des polices correctement?

javascriptlaravelvue.jssass
5
Yaroslav Saenko

Sur la base de ce problème dans le laravel mix github https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel le mix copiera le polices automatiquement lors de leur référencement correct.

Par conséquent, je suggère d'utiliser un chemin d'accès relatif lors du référencement de la police. Cela devrait en fait déclencher laravel mix pour créer un dossier "fonts" dans votre dossier "public"

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('./../fonts/Proxima-Nova-Bold.otf');
}
2
Frank Provost

Vous devrez peut-être ajouter une ligne comme celle-ci à votre fichier de mixage:

.copy('resources/fonts', 'public/fonts')
0
kaizer_bun