web-dev-qa-db-ja.com

Vue.jsプロジェクトでフォントを追加する方法

LaravelとVue.jsを使用するプロジェクトがあり、scssを使用します。プロジェクトに新しいフォントを追加したいのですが、できません。ファイルfonts.scssを作成し、フォント付き変数

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

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

そして、コンソールのミスがありますGET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

Vueコンポーネントでscssファイルをインポートする方法は次のとおりです。

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

ここに私の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')

どこで間違えましたか？または、フォントを正しく追加する方法を教えてください。

javascriptlaravelvue.jssass
5
Yaroslav Saenko

laravel mix githubのこの問題に基づいて https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel mixは参照時にフォントを自動的にコピーしますそれらを正しく。

したがって、フォントを参照するときに相対パスを使用することをお勧めします。これにより、実際にlaravelミックスがトリガーされ、「public」フォルダーにフォルダー「fonts」が作成されます。

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

ミックスファイルに次のような行を追加する必要がある場合があります。

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