React 正在将 FontAwesome 样式渲染到页面

Question

我能够将各种 FontAwesome 图标渲染到我的 React 应用程序，但同时 - 在我的页面顶部，它还渲染了 FontAwesome 附带的原始 css 样式。如果我检查我的页面 - 我在那里看到一个 type=css 的样式元素。我相信我正在处理我的 webpack 中的 CSS 文件：

  {
    test: /\.css$/,  
    include: /node_modules/,  
    loaders: ['style-loader', 'css-loader'],
  },

不知道为什么会这样。

Answer 1

如果您使用Font Awesome 5 SVG with JS，那么默认情况下，Font Awesome 将在第一次呈现图标时自动添加其 CSS，除非您在配置中将 autoAddCss 设置为 false。您可以在此处查看有关setting the config options 的更多信息。要禁用它，您可以添加一个 <script> 块来设置配置在加载 Font Awesome js 之前，如下所示：

<script type="text/javascript">
  window.FontAwesomeConfig = { autoAddCss: false }
</script>

或者，像这样在加载 FontAwesome 的 JavaScript 模块中——之前 FontAwesome 尝试渲染第一个图标：

import fontawesome from "@fortawesome/fontawesome";
fontawesome.config = { autoAddCss: false };

更新：从 Font Awesome 5.0.x 开始，上述示例是 当前 的方法。随着 5.1 的发布，我们将采用不同的方式来实现这一点，这在我们的 preview docs here 中有记录。