无法使用 webpack 加载很棒的字体答案

【问题标题】：Cannot load font awesome with webpack无法使用 webpack 加载很棒的字体
【发布时间】：2017-05-27 04:24:27
【问题描述】：

这似乎是一个常见的问题，但我看到的其他问题没有我的症状。

我正在使用带有 React、Scss 和 Webpack 的 font-awesome npm 包。（我尝试了font-awesome-webpack 和其他一些，但它们对我不起作用。）我没有使用 Bootstrap。

我遵循了 SO、教程等中许多问题的指示，但似乎发生了同样的事情。要么是错误，要么是我在图标所在的页面上得到符号（例如，我得到 ~ 而不是下载图标）

在我的反应视图中：<span className="fa fa-download"/>（呈现为~）

我main.sass的前两行：

$fa-font-path: "~font-awesome/fonts"
@import "~font-awesome/scss/font-awesome.scss"

在webpack.config.js 中（我已经尝试了以下的很多排列但没有成功）：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

在package.json 中，我在依赖列表中安装了font-awesome，以及在devDependencies 中安装了file-loader、css-loader、style-loader、sass-loader 和url-loader。

渲染的 HTML 元素上的字体显示font-family: FontAwesome。控制台中没有 404 或其他问题。

谁能告诉我我做错了什么？

【问题讨论】：

您一定会怀疑，当您尝试的任何方法都不起作用时，即使是专门为该任务设计的加载程序，您实际上在做一些根本上可怕的错误。除了共享 sn-ps，您还可以显示有关您的项目的更多详细信息，例如您存储文件的位置以及完整的 webpack 文件的外观。如果您有兴趣正确解决此问题以及将来可能会遇到更多问题。
我认识的某个人确实说过，他们在让 FA 也能正常工作时遇到了很糟糕的事情。文档不是很好，这并没有真正的帮助：/
抱歉，我遇到了类似的问题，但我无能为力，但正如 Gimy 所说，您应该发布完整的文件。

标签： reactjs webpack font-awesome

【解决方案1】：

您可以尝试具体提及每种字体类型的加载程序和 mime 类型，如下所示。

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      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"
    }]
  }

完整的要点是here

【讨论】：

感谢您的回答。我用这些替换了我的加载器，重新启动了 npm 服务器，但仍然没有任何变化：/

【解决方案2】：

好的，我最后添加了

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">

到我的 index.html 文件。我很惊讶我不得不这样做。我宁愿避免它！但是你去吧。

【讨论】：

我没有将其标记为答案，因为它并没有真正解决它。这更像是权宜之计。

【解决方案3】：

您可以尝试使用加载器设置 公共路径，以便在捆绑后将 font-awesome 指向正确的路径

ie - publicPath=../

这是我在 webpack.config.js 中设置我的方式

{ test: /\.(woff2?|svg)$/, 
  loader: 'url-loader?publicPath=../&limit=10000&name=fonts/[name].[ext]' 
},

// and the output css, which is working :

@font-face {
    font-family: 'FontAwesome';
    src: url(../fonts/fontawesome-webfont.eot);

// if not, it will not be able to locate the fonts path, 
// but css can traverse back from current directory with - "../"

没有公共路径

{ test: 
     /\.(woff2?|svg)$/, 
     loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' 
},

css 输出，不工作

@font-face {
   font-family: 'FontAwesome';
   src: url(fonts/fontawesome-webfont.eot);

【讨论】：