无法使用Webpack加载超棒的字体 [英] Can't load font-awesome with Webpack
问题描述
尝试使用webpack加载超棒的字体会给我这个错误:
Trying to load font-awesome with webpack gives me this error:
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
我试图在这样的React组件中导入超棒的字体:
I'm trying to import font-awesome in a React component like this:
import "font-awesome/scss/font-awesome.scss";
这是我的webpack.config.js的样子.我想分别加载font-awesome和相关资产,这是因为我已经用babel加载了SVG,但是不想使用font-awesome来完成.
Here's what my webpack.config.js looks like. I wanted to load font-awesome and related assets separately from everything else, namely because I'm already loading SVGs with babel, but didn't want to do that with font-awesome.
{
test: /\.scss/,
loader: ExtractPlugin.extract("style", "css!sass")
},
{
test: /\.svg$/,
loader: "babel!svg-react",
exclude: /node_modules/
},
{
test: /\.ttf$/,
loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]",
exclude: /node_modules/
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]",
exclude: /node_modules/
},
{
test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/,
loader: "url?limit=10000",
include: "node_modules/font-awesome/fonts"
}
我也尝试过这样的正则表达式,但是它不起作用:
I've tried doing the regex like this too and it didn't work:
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }
推荐答案
要正确加载超棒的字体,您需要在webpack.config.js中配置加载器以使用url-loader和file-loader.示例:
To properly load font-awesome fonts, you need to configure loaders in your webpack.config.js to use url-loader and file-loader. Example:
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"
},
]
}
};
为此,您需要npm install font-awesome-sass-loader npm i font-awesome-sass-loader
您还需要url-loader npm i url-loader
和文件加载器npm i file-loader
to do this, you'll need to npm install font-awesome-sass-loader npm i font-awesome-sass-loader
You'll also need url-loader npm i url-loader
and file-loader npm i file-loader
这篇关于无法使用Webpack加载超棒的字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!