webpack使用字体真棒

Question

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

webpack配置

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， 则应始终在每个加载程序的名称后添加-loader后缀。 这是我在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和导入的css提供不同的工具 。

在url-loader添加的模式是处理从font-awesome.css导入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相同