我正在尝试在我的应用程序中使用FontAwesome。 我使用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";
font-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忽略了我的加载器?