font-awesome webpack SyntaxError:无效或意外的token

Question

我是新手，在我的React设置中安装非常棒的字体时遇到了麻烦。

Webpack V2.2.1
React starter kit

我跑过了：

npm install font-awesome --save-dev

然后在我的主.scss文件中，我调用：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

在我的webpack.config.js中，我有：

...
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
    loader: 'file-loader',
...

但是在compile：yarn start上我得到了错误：

webpack: Compiled successfully.
..\node_modules\font-awesome\fonts\fontawesome-webfont.eot:1
(function (exports, require, module, __filename, __dirname) { n�
                                                               ^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
    at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)

这是我的webpack设置的问题吗？装载机有问题吗？或者是路径的问题？或者是字体本身有问题？

任何帮助都是令人惊叹的。

Answer 1

正如wuxiandiejia所说，这里通过使用相对路径解决了问题-尽管查看了错误输出，但webpack已经使用~声明在正确的位置进行了查找。真奇怪。

因此，不是：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

我使用过：

$fa-font-path: "../../../node_modules/font-awesome/fonts";
@import "../../../node_modules/font-awesome/scss/font-awesome";

一切似乎都正常了！