CSS Webpack 无法加载字体文件：意外令牌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31180570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack can not load font file: Unexpected Token
提问by Angela
I have a style.cssfile that makes use of a font file, and I'm having trouble getting the font file loaded using Webpack. Here is my loader configuration:
我有一个使用字体文件的style.css文件，但我无法使用 Webpack 加载字体文件。这是我的加载程序配置：
loaders : [
{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
loader : 'react-hot!babel-loader'
}, {
test : /\.styl/,
loader : 'style-loader!css-loader!stylus-loader'
}, {
test : /\.css$/,
loader : 'style-loader!css-loader'
}, {
test : /\.(png|jpg)$/,
loader : 'url-loader?limit=8192'
}, {
test : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
loader : 'file-loader'
}
/*}, {
test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader : 'url-loader?limit=10000&minetype=application/font-woff'*/
]
The errors that I receive is
我收到的错误是
ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt 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/fonts/icon/style.css 2:293-331
It looks to me that Webpack is taking it as a CSS file when it's not. But I'm pretty sure the test expression passes for the font file
在我看来，Webpack 把它当成一个 CSS 文件，而不是它。但我很确定字体文件的测试表达式通过了
回答by nils
The regex in your test expression has a small mistake. woff(2)means that it always looks for woff2and just captures the 2in a separate group. If you add a ?after it, webpack should be able to recognize woffas well:
测试表达式中的正则表达式有一个小错误。woff(2)意味着它总是在一个单独的组中寻找woff2并捕获2。如果?在它后面添加 a ，webpack 也应该能够识别woff：
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
Please let me know if this worked.
请让我知道这是否有效。
回答by svassr
This did the trick for me:
这对我有用：
{ 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" },
