我想在我的應用程序中使用FontAwesome。我正在使用webpack來做它的魔法。我的配置是:Webpack和字體:模塊解析失敗
resolve: {
// you can now require('myfile') instead of require('myfile.cjsx')
extensions: ['', '.js', '.jsx', '.cjsx', '.coffee']
},
module: {
loaders: commonLoaders.concat([
{ test: /\.css$/, loader : 'style-loader!css-loader' },
{ test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' },
{ test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
{ test: /\.coffee$/, loader: 'coffee' },
{ test: /\.jsx$|\.js$/, loader: 'jsx-loader?harmony' },
])
}
我請求FontAwesome CSS這樣的:
require "../../styles/font-awesome.min.css";
字體awesome.min.css包含此:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
,由於某種原因,的WebPack試圖用style-loader解析.woff文件並給出錯誤:
ERROR in ./src/fonts/fontawesome-webfont.woff
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.woff Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./src/styles/font-awesome.min.css 2:73-117
我現在真的迷路了。有任何想法嗎?
更新: 我現在完全失去了。我決定鬼混與我的配置,並把此行裝載機:
{ test: /\.eot$/, loader : 'file' },
和所需文件:
require "../../fonts/fontawesome-webfont.eot";
遇到錯誤:
ERROR in ./src/fonts/fontawesome-webfont.eot
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.eot Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
然而,當我試圖要求我的文件是這樣的:
require "file!../../fonts/fontawesome-webfont.eot";
一切順利。看起來像webpack忽略我的裝載機?
你可以看看https://github.com/guillaumevincent/webpack-bootstrap-fontawesome –