javascript - 如何使用 webpack 从 node_modules 目录添加 Font Awesome

标签 javascript webpack sass frontend font-awesome

我已经使用 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]',
}

app.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]',
}

关于javascript - 如何使用 webpack 从 node_modules 目录添加 Font Awesome ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44059420/

相关文章:

css - SASS 普通类和嵌套类具有相同的属性

css - 在 Sass 中匹配多个 BEM 修饰符

javascript - 如何在 Javascript 中锁定线程?

javascript - 检查给定的字符串是否为日期对象

javascript - 错误:在为我的 typescript 应用程序配置Webpack时无法解析"file"或“目录”

reactjs - 如何管理具有许多独立小部件的大型 React/Redux 项目

javascript - 左对齐文本,但如果左侧太长,则添加前缀 ...

asp.net - 删除/隐藏浏览器地址栏或工具栏网页

javascript - Angular 2+ : IE 11 Unable to get property 'call' of undefined or null reference

css - 长 CSS 类名对继承性能的影响