Javascript 使用字体的网页

在我的react应用程序中，我想将css文件与网页包和css加载程序一起使用。我的配置如下所示：

<div className={`row`}>

网页包配置

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>

在render方法中，我有以下内容：

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

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

没有错误，但也没有显示图标。。。我犯了什么错

---

谢谢

您可能需要在处理字体文件的加载程序中添加名称参数

例如：

---

如果您使用的是Webpack 2，下面是我在Webpack.config.js中正确运行的代码部分：

        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use:[{
                loader: 'url-loader',
                options:{
                    limit: 100000,
                    name: 'assets/resources/[name].[ext]'
                }
            }]
        }

---

我正在使用

url加载器

，但在这种情况下，它也应该与

文件加载器

一起工作。

好吧，在我的情况下，我将在

url加载器

的扩展名后添加一个小模式，以及一些

包含

排除

指令

这是因为我们希望我们的css和导入的css有不同的工具

url加载器中添加的模式是处理从
font awesome.css
导入的，因为它们看起来像：
src:url（'../font/fontawesome-webfont.eot？v=4.7.0'）

下面是我的
webpack.config.js
文件的摘录：

  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        // CSS Modules https://github.com/css-modules/css-modules
        modules: true,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        // CSS Nano http://cssnano.co/options/
        minimize: !isDebug,
        camelCase: 'dashes',
      })}`,
      'postcss-loader',
    ],
    exclude: [
      path.resolve(__dirname, './node_modules/font-awesome'),
    ],
  },

// ...
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      'css-loader',
    ],
    include: [
      path.resolve(__dirname, './node_modules/font-awesome'),
    ],
  },
 // ...

{
  test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/,
  loader: 'url-loader?limit=10000',
},

我的解决方案是在我的www/index.html中添加css文件

然后我可以像这样使用css：

<div className={`row`}>



与bootstrap和fontstrap相同