使用Webpack加載Font-Awesome（OTS解析錯誤：無效版本標記）

我的設置是一個簡單的Webpack（v1。），包含React，jQuery和Bootstrap（所有工作都很好）。我試圖通過npm i font-awesome -S添加字體。我想最好的解決方案是自動加載它。我只得到在瀏覽器控制檯錯誤說每個字體文件如下：使用Webpack加載Font-Awesome（OTS解析錯誤：無效版本標記）

Failed to decode downloaded font: http://localhost:3000/static/fontawesome-webfont.ttf?v=4.7.0 
OTS parsing error: invalid version tag

這是我的設置：

webpack.config

... 
output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: 'http://localhost:3000/static/' 
}, 
module: { 
    loaders: [ 
    .... 
    { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff" 
    }, 
    { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader" 
    } 
    ] 
}, 
...

app.scss

$fa-font-path: 'http://localhost:3000/static'; 
@import '../../node_modules/font-awesome/scss/font-awesome.scss';

...然後在主App.js文件中導入scss文件。

正如您所看到的，我正在使用file-loader和url-loader作爲字體。

這將是很高興看到在static -url服務的所有文件的列表，有沒有辦法在控制檯中輸出該信息？甚至很難看到問題出在哪裏。如果字體根本沒有加載或只是在錯誤的網址。

來源

2016-12-06 Chris

我最近剛剛遇到了一個非常類似的問題：在我的Meteor應用程序中使用font-awesome（npm包版本）。事實證明，字體文件沒有加載/服務。

回答問題的第二部分：如果字體文件加載正確，則應在「來源」標籤（在Chrome開發人員工具中）中顯示該字體文件。

第一部分是棘手的，我沒有解決方法，只是一個提示：由於你的字體文件似乎沒有加載，我會斷定webpack不會「看到」字體文件。「node_modules」被排除在配置的某處，或者font-awesome npm包不能正確導出字體文件。或者介於兩者之間。

我的問題是類似的：來自「node_modules」文件夾內的靜態內容沒有被Meteor的內部捆綁器承認。所以我的解決方法是在package.js中創建一個npm「postinstall」腳本，將字體文件複製到適當的位置：「PATH_OF_MY_APP/public/fonts」，以便捆綁器可以將其拾取。

來源

2017-01-11 10:14:00 Crenshinibon

在嘗試了很多其他方法以及大量重新安裝並檢查我的流星和NPM配置之後，我剛剛通過清除瀏覽Chrome瀏覽數據（緩存的圖像和文件）並刷新頁面來解決了此問題。所以值得一試，如果你有同樣的問題，似乎無法解決它

來源

2017-03-14 13:03:49

使用Webpack加載Font-Awesome（OTS解析錯誤：無效版本標記）

回答

相關問題