webpackを通じてフォントが読み込まれない

Question

こんにちは。 私は必死に私はこれらのルールの両方を試してみましたファイル・ローダー を使用してフォントをロードしよう：

{ test: /\.(woff|eot|svg|otf|ttf)$/i, loader: `file-loader`, options: {name:'fonts/[name].[ext]'}}, 
{ test: /\.(woff|eot|svg|otf|ttf)$/i, loader: `file-loader?name=fonts/[name].[ext]`}, 

しかし、する@ font-face規則に彼らのために尋ねられたとき、残念ながら、フォントが引かれません。

@font-face { 
    font-family: 'Example'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/Example.ttf') format('truetype'); 
} 

これは以下のように私のプロジェクトの構造がどのように見えるかです：これは

WebPACKの出力：

fonts.lessがロードされている間、私は）（任意のフォントは、srcの定義によってロード取得表示されません。

事前にヒントをいただきありがとうございます。

は、ここでは、完全な設定ファイルを参照してください：https://gist.github.com/MartinMuzatko/2873b52fed204bd6e8aaaa94527e34a9

Answer 1

問題は、あなたがextract-text-webpack-pluginがそれを使用できるように、JavaScriptにless-loaderの出力を変換するためにraw-loaderを使用しているということです。

{ 
    test: /\.less$/, use: ExtractTextPlugin.extract(
     [ 
      {loader:'raw'}, 
      {loader:'less'} 
     ] 
    ), 
} 

less-loaderは、Less構文を通常のCSSに変換するだけです。 url()には触れません。一方、css-loaderは、webpackが解決するインポートとして扱います。それでは、フォントのルールが有効になります。あなたがする必要があるのはraw-loaderの代わりにcss-loaderを使用するように.less規則を変更します

{ 
    test: /\.less$/, use: ExtractTextPlugin.extract(
     [ 
      {loader:'css'}, 
      {loader:'less'} 
     ] 
    ), 
}