Question

我是webpack的新手，我在设置的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',
...

但是在编译时：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)

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

任何帮助都会很棒。

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";

一切似乎都有效！

font-awesome webpack语法错误：无效或意外的令牌

1 个答案: