Question

在我的反应应用程序中，我想使用带有webpack和css加载器的fontawesome css文件。我的配置如下所示：

webpack config

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]'
},
...

Answer 2

如果您正在使用Webpack 2，you should always add the -loader suffix after each loader's name.这是我在webpack.config.js中正常运行的代码部分：

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

我使用url-loader，但在这种情况下，它也可以与file-loader一起使用。

Answer 3

嗯，在我的情况下，我会在url-loader和一些include / exclude指令的扩展名后添加一个小图案。

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

url-loader中添加的模式是处理来自font-awesome.css的导入，因为它们看起来像：src: url('../fonts/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',
},

Answer 4

对我有用的解决方案是在我的www / index.html

中添加css文件

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

<div className={`row`}>

与bootstrap和fontawesome相同

webpack使用字体真棒

4 个答案: