Webpack 无法加载字体文件:Unexpected Token [英] Webpack can not load font file: Unexpected Token
问题描述
我有一个使用字体文件的 style.css 文件,但我无法使用 Webpack 加载字体文件.这是我的加载程序配置:
I have a style.css file that makes use of a font file, and I'm having trouble getting the font file loaded using Webpack. Here is my loader configuration:
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'*/
]
我收到的错误是
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
在我看来,Webpack 把它当成一个 CSS 文件,其实不然.但我很确定字体文件的测试表达式通过了
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
推荐答案
测试表达式中的正则表达式有一个小错误.woff(2)
意味着它总是寻找 woff2
并且只在一个单独的组中捕获 2
.如果你在它后面添加一个 ?
,webpack 应该也能识别 woff
:
The regex in your test expression has a small mistake. woff(2)
means that it always looks for woff2
and just captures the 2
in a separate group. If you add a ?
after it, webpack should be able to recognize woff
as well:
test : /.(ttf|eot|svg|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
请告诉我这是否有效.
这篇关于Webpack 无法加载字体文件:Unexpected Token的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!