無法加載字體真棒用的WebPack

試圖加載字體真棒用的WebPack給了我這個錯誤：無法加載字體真棒用的WebPack

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 
Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type.

我試圖導入字體真棒在這樣的陣營組成：

import "font-awesome/scss/font-awesome.scss";

這是我的webpack.config.js的樣子。我想加載font-awesome和相關資源，因爲我已經用babel加載SVG，但不想用font-awesome加載。

{ 
    test: /\.scss/, 
    loader: ExtractPlugin.extract("style", "css!sass") 
}, 
{ 
    test: /\.svg$/, 
    loader: "babel!svg-react", 
    exclude: /node_modules/ 
}, 
{ 
    test: /\.ttf$/, 
    loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]", 
    exclude: /node_modules/ 
}, 
{ 
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]", 
    exclude: /node_modules/ 
}, 
{ 
    test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/, 
    loader: "url?limit=10000", 
    include: "node_modules/font-awesome/fonts" 
}

我試着做這樣的正則表達式也和它沒有工作：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }

來源

2016-07-20 Justin Smith

正確加載字體真棒字體，你需要在你的webpack.config.js配置裝載機使用URL裝載機和文件加載。例如：

module.exports = { 
    module: { 
    loaders: [ 
     // the url-loader uses DataUrls. 
     // the file-loader emits files. 
     { 
     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" 
     }, 
    ] 
    } 
};

要做到這一點，你需要安裝NPM字體真棒 - 薩斯裝載機npm i font-awesome-sass-loader 您還需要URL裝載機npm i url-loader 和文件裝載機npm i file-loader

來源

2016-09-21 06:33:00 mchavezi

嘗試使用file-loader，而不是url-loader加載您.eot文件。

例：

module: { 
    loaders: [ 
     { 
      test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/, 
      loaders: ['file'] 
     } 
    ] 
}

來源

2016-07-20 17:01:38 adriennetacke

能否請您解釋一下爲什麼我們要使用'文件loader'，而不是'網址loader'？ –

這個工作我想很多例子後：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }, 
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

而且可以肯定fontawsome需要在你的主要導入的文件

import 'font-awesome/css/font-awesome.css';

也不要忘記安裝裝載機

npm install url-loader --save-dev

來源

2016-10-21 16:10:58 ghaliano

難道你不能只用'（ttf | eot | svg | woff2？）'來完成它嗎？ –

無法加載字體真棒用的WebPack

回答

相關問題