2017-01-17 15 views
0

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の代わりにコミックを読み込みます。

これをデバッグする方法を知りません。どんな助けでも大いに感謝します。

答えて

0

ここで何が起こっているのか分かりました。アセット(フォント/イメージ)をスタイルシートにインポートし、スタイル・ローダーのsourceMapsを有効にすると、ファイルローダー+スタイル・ローダーが問題になっているようです。

webpack configの相対パブリックパスをsourceMapsを有効にして使用することはできず、代わりに絶対パスを使用する必要がある既知のバグがあります。[webpack/style-loader issue #55]を参照してください。

この問題を解決するためのTL;私のwebpack出力のpublicPathを '/'から 'http://0.0.0.0:8080/'に変更しました。

関連する問題