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')
どこで間違えましたか?または、フォントを正しく追加する方法を教えてください。
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');
}
ミックスファイルに次のような行を追加する必要がある場合があります。
.copy('resources/fonts', 'public/fonts')