2

我是 webpack 的新手，在我的 React 设置中安装 font-awesome 时遇到了麻烦。

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)

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

任何帮助都会很棒。

4

1 回答 1

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

一切似乎都奏效了！

于 2017-03-19T08:40:14.223 回答