ディレクトリの場所が間違っているとかですかね？
ディレクトリ構成と、どのディレクトリでコンパイル？を実行したか共有して頂けますでしょうか？
0Like
@font-face のエラー
Q&AClosed
###環境
Windows10、vscode
解決したいこと
public
＞fonts
＞Kozuka-Gothic-Pro-R.otf
上記のようにフォントファイルを保存し、このファイルのインストールもしましたが
@font-face {
font-family: KozGo;
src: url(./fonts/Kozuka-Gothic-Pro-R.otf);
}
を実行すると下記のエラーが出ます。
発生している問題・エラー
Compiled with problems:X
ERROR in ./src/component/css/Vital.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/component/css/Vital.css) 5:36-95
Module not found: Error: Can't resolve './fonts/Kozuka-Gothic-Pro-R.otf' in 'C:\
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
@font-face {
font-family: KozGo;
src: url(./fonts/Kozuka-Gothic-Pro-R.otf);
}
どうすれば解決できるでしょうか？
1
1Answer
Comments
CSSの
urlは、相対パスだとCSSファイルの位置からの相対パスを読み込むようです。もし
@font-faceを定義したのが./src/component/css/Vital.cssであれば、
この設定は
./src/component/css/fonts/Kozuka-Gothic-Pro-R.otfを探していることになります。以下などに変えてみるとどうでしょうか？
@font-face { font-family: KozGo; src: url(../../../public/fonts/Kozuka-Gothic-Pro-R.otf); }@rempei
Questionerご回答ありがとうございます。参考にさせていただきます。
できれば、解決したかどうかコメント頂けると他の方の参考になると思います
