无法在 React 中导入生成的 fontello css

Question

当我想在我的 App.jsx 中导入 Fontello 自动生成的 CSS 文件时，它给我一个错误：

./src/assets/fontello/css/fontello.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/assets/fontello/css/fontello.css)
    Syntax error: Unknown word (58:1)

  56 | }
  57 |  
> 58 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;albums-outline:before { content: '\e801'; } /* '' */
     | ^
  59 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;chatbubble-outline:before { content: '\e802'; } /* '' */
  60 | .icon-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;14.766&quot; viewBox=&quot;0 0 16 14.766&quot;&gt;   &lt;g id=&quot;Examples&quot; transform=&quot;translate(-246.5 -7.77)&quot;&gt;     &lt;g id=&quot;albums-outline&quot; transform=&quot;translate(198.5 -56.23)&quot;&gt;       &lt;g id=&quot;Group_59&quot; data-name=&quot;Group 59&quot; transform=&quot;translate(48 67.432)&quot;&gt;         &lt;path id=&quot;Path_67&quot; data-name=&quot;Path 67&quot; d=&quot;M62.27,171.334H49.727A1.747,1.747,0,0,1,48,169.567v-7.8A1.749,1.749,0,0,1,49.727,160H62.273A1.749,1.749,0,0,1,64,161.767v7.8A1.752,1.752,0,0,1,62.27,171.334ZM49.727,161.259a.5.5,0,0,0-.5.508v7.8a.5.5,0,0,0,.5.508H62.273a.5.5,0,0,0,.5-.508v-7.8a.5.5,0,0,0-.5-.508Z&quot; transform=&quot;translate(-48 -160)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;       &lt;g id=&quot;Group_60&quot; data-name=&quot;Group 60&quot; transform=&quot;translate(49.716 64)&quot;&gt;         &lt;path id=&quot;Path_68&quot; data-name=&quot;Path 68&quot; d=&quot;M113.269,80h8.883M112,81.716h11.42&quot; transform=&quot;translate(-111.428 -79.428)&quot; fill=&quot;#30c0b0&quot;/&gt;         &lt;path id=&quot;Path_69&quot; data-name=&quot;Path 69&quot; d=&quot;M107.936,66.86H96.628a.575.575,0,1,1,0-1.144h11.308a.575.575,0,1,1,0,1.144Zm-1.256-1.716h-8.8a.575.575,0,1,1,0-1.144h8.8a.575.575,0,1,1,0,1.144Z&quot; transform=&quot;translate(-96 -64)&quot; fill=&quot;#30c0b0&quot;/&gt;       &lt;/g&gt;     &lt;/g&gt;   &lt;/g&gt; &lt;/svg&gt;checkmark-done-outline:before { content: '\e803'; } /* '' */

您可以从 here 下载完整的 CSS 个文件（点击页面右侧的红色按钮）。

我没有针对 Webpack 的特殊配置。而且我不确定它是否与 Webpack 相关。我也尝试删除 node_modules 并重新安装软件包，但没有成功。

Answer 1

我终于找到了解决办法。问题出在 .fontello-session 文件上。我不知道到底是什么问题，但删除它可以使一切恢复正常。

无法在 React 中导入生成的 fontello css

Cannot import fontello generated css in React

css

reactjs

fontello