向React项目

Question

我试图在我的React-redux项目中添加font-awesome。我收到了与链接相同的错误：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

Answer 1

尝试将-loader添加到您的所有加载器：file-loader，url-loader等。由于webpack 2，因此需要添加-loader后缀。

Answer 2

我非常推荐从FontAwesome 5开始，因为它现在已经发布了。 它可以更容易地集成到React应用程序中，并且更好地使用SVG图标。

FontAwesome 5添加了对React的支持，请查看here

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

安装：

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

并且像这样使用

<FontAwesomeIcon icon="coffee"/>

Answer 3

来自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} />