为什么模块解析失败:/xxx/MyFont.ttf意外字符" [英] Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''
本文介绍了为什么模块解析失败:/xxx/MyFont.ttf意外字符"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到此错误
./src/style/MyFont.ttf中的ERROR模块解析失败:/xxx/MyFont.ttf 意外的字符''(1:0)您可能需要适当的装载程序来 处理此文件类型. (此二进制文件省略了源代码)` 当我在这样的less文件中导入自定义字体时:
ERROR in ./src/style/MyFont.ttf Module parse failed: /xxx/MyFont.ttf Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)` when I import my custom font in my less file like this:
@font-face {
font-family: "MyFont";
src: url("./MyFont.ttf") format("truetype");
}
我的webpack配置如下:
my webpack config is as follow:
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: babelQuery
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
},
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
]
有人知道如何解决吗?
推荐答案
将此添加到您的rules
数组.
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
,您应该使用npm install
安装file-loader
.
希望对您有帮助.
and you should install the file-loader
using npm install
.
Hope this will help you.
这篇关于为什么模块解析失败:/xxx/MyFont.ttf意外字符"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文