将 font-awesome 添加到 React 项目时出错答案

【问题标题】：Error while adding font-awesome to React project将 font-awesome 添加到 React 项目时出错
【发布时间】：2018-06-26 01:40:31
【问题描述】：

我正在尝试将 font-awesome 添加到我的 React-redux 项目中。我得到了与链接中相同的错误：Webpack problems importing font-awesome library。但是修改 webpack.config.js 没有帮助。现在我的 webpack.config.js 看起来像：

 module: {
 loaders: [{
    exclude: /node_modules/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015', 'stage-1']
    }
 },       
   { test: /\.css$/, loader: 'style-loader!css-loader' }, 
   {
        test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        loader: 'url-loader?limit=10000'
    },  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
    }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
    }
]}

我得到的错误是：

at Parser.pp$3.parseExprSubscripts (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
Module not found: Error: Cannot resolve module 'file' in <project>\node_modules\font-awesome\css
@ ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:312-355

ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
@ ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:412-465

ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
 @ ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:495-547

ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/octet-stream didn't return a function
@ ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:576-627

ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=image/svg+xml didn't return a function
 @ ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:660-711

【问题讨论】：

webpack --display-error-details 是否提供更多信息？
@xjmdoo 我将 stats:{errorDetails:true} 添加到 webpack.config.js 并更新了错误。

标签： reactjs react-native react-redux font-awesome

【解决方案1】：

来自 bash：

yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-free-solid
yarn add @fortawesome/react-fontawesome

在js文件头

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee';

在渲染函数中

<FontAwesomeIcon icon={faCoffee} />

【讨论】：

【解决方案2】：

我强烈建议您从 FontAwesome 5 开始，因为它现已推出。它更容易集成到 React 应用程序中，并且使用 SVG 图标更好。

FontAwesome 5 增加了对 React 的支持，看看here

他们为它创建了一个特定的包。 Here

安装：

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/react-fontawesome

这样使用

<FontAwesomeIcon icon="coffee"/>

【讨论】：

【解决方案3】：

尝试将-loader 添加到所有加载程序：file-loader、url-loader 等。从 webpack 2 开始，需要添加 -loader 后缀。

【讨论】：