字體沒有通過webpack加載

Question

你好親愛的webpack社區。 我拼命地嘗試使用文件裝載 我想這兩個規則來加載字體：

{ 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

的問題是，你使用raw-loader到less-loader的輸出轉換爲JavaScript，以便extract-text-webpack-plugin可以使用它。

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

less-loader只是將Less語法轉換爲常規CSS。 url()將不會被觸碰。另一方面，css-loader將它們視爲webpack將解析的進口。只有這樣你的字體規則纔會生效。所有你需要做的是改變你的.less規則來使用css-loader而不是raw-loader：

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