webpack v2とファイルローダーでフォントを読み込めません。任意のフォントファイルにurl-loaderを使用すると、すべてが完璧に動作します。しかし、バンドルされたjsファイルにすべてのイメージとフォントを格納するのではなく、フォントファイルをキャッシュできるように、ファイルローダーを使用したいと思います。ファイルローダーとwebpack v2でフォントを読み込めません
私はwebpack v2、css-modules、postcss(とpostcss-loader)を使用しています。
簡単にするために、私はメインのindex.jsxファイルに含まれているglobal.pcssスタイルシートに@ font-faceを定義します。 (この問題をデバッグしながら、これは一時的な措置だった。通常、すべてする@ font-face宣言は別のファイルになります)
@font-face {
font-family: 'ProximaNova-Rg';
src: './ProximaNova-Rg';
font-weight: normal;
font-style: normlal;
}
:global html {
font-family: 'ProximaNova-Rg', Comic Sans Ms;
}
WebPACKのためのアプリケーションのエントリポイントである私のindex.jsxファイルでは、私はインポートそのglobal.pcssファイル
import './global/global.pcss'
global.pcssファイルの他のスタイルはすべて正しく適用されます。私が正しく負荷をフォントのurl-ローダーのために上のファイル・ローダーを交換した場合
私のWebPACKの設定は、フォント
{
test: /\.(otf|eot|ttf|woff2?)(\?\S*)?$/,
use: 'file-loader?name=fonts/[name]-[hash].[ext],
}
ために、次のようになります。ファイルローダーを使用して、私がプロジェクトをビルドするとき、ファイルローダーが正しい名前のフォントファイルを作成してdistフォルダに移動したことを確認できますが、私のプロジェクトはProxima Nova、ewwの代わりにコミックを読み込みます。
これをデバッグする方法を知りません。どんな助けでも大いに感謝します。