Webpack and fonts: module parse failed - css

Question

I'm trying to use FontAwesome in my app. I'm using webpack to do it's magic. My config is:
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' },
])
}
I'm requesting FontAwesome CSS like that:
require "../../styles/font-awesome.min.css";
font-awesome.min.css contains this:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And for some reason, WebPack tries to parse .woff file with style-loader and gives me error:
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
I'm really lost right now. Any ideas?
Update:
I'm completely lost right now. I've decided to fool around with my config and put this line in loaders:
{ test: /\.eot$/, loader : 'file' },
And required this file:
require "../../fonts/fontawesome-webfont.eot";
Got error:
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)
However, when I tried to require my file like this:
require "file!../../fonts/fontawesome-webfont.eot";
Everything went smooth. Looks like webpack ignores my loaders?

Answer 1

it depends on the url used in css.
this error is releated to regex, try to change (\?[a-z0-9]+) to (\?v=[0-9]\.[0-9]\.[0-9]) or (\?[\s\S]+).
Example:
https://github.com/gowravshekar/font-awesome-webpack
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" }
]
}
};
https://github.com/shakacode/font-awesome-loader
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
loader: "url"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file'
},
]
}
};

Answer 2

The other day I add the font-awesome through the LESS source so basically
npm install --save less-loader
bower install --save components-font-awesome
Then I require font awesome like this
require('bower_components/components-font-awesome/less/font-awesome.less')
And finally in the webpack.config.js I add the loader modules
var path = require('path')
module.exports = {
...
, module: {
loaders: [
{test: /\.less$/, loader: "style!css!less"},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
I know that it not the same with .css but I believe that its easy this way. Hope it helps.