javascript - webpack 使用很棒的字体

Question

在我的 React 应用程序中，我想将 fontawesome css 文件与 webpack 和 css 加载器一起使用。我的配置如下所示:

网络包配置

module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      }, {
            test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
            loaders: ['file']
        },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      },
    ]

在 index.js 中我有这个:

import 'font-awesome/css/font-awesome.css';

在渲染方法中我有这个:

<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar"
                                         aria-hidden="true"></NavLink></li>

没有错误，但也没有显示图标......我的错误是什么？

谢谢

Answer 1

您可能需要向处理字体文件的加载器添加名称参数。

例如:

...
{
 test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
 loader: 'file-loader?name=./[name].[hash].[ext]'
},
...