[英]How to add font awesome from node_modules directory using webpack
我已经使用 npm install font-awesome --save-dev 安装了 font-awesome,现在我无法将它包含在我的项目中。 下面是我的代码。
webpack.config.js
{
test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
loader: 'file-loader?name=assets/[name].[ext]',
}
应用程序.scss
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
错误
./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 模块解析失败:/ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 意外字符 ' ' (1:1) 您可能需要一个合适的加载器来处理这种文件类型。
通过阅读做一些研究,我终于通过在正则表达式部分添加([\\?]?.*)$解决了它。
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
loader: 'file-loader?name=assets/fonts/[name].[ext]',
}
您是否安装了 npm file-loader 包?
npm install --save-dev file-loader
我有一个 webpack 示例存储库,其中包含 font-awesome。 它可能会有所帮助。 你可以在这里找到
使用新的 webpack 版本,您可能想尝试
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
use: [
{
loader: 'file-loader?name=assets/fonts/[name].[ext]'
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.