Невозможно импортировать сгенерированный шрифтом css в React

Когда я хочу импортировать автоматически сгенерированный CSS-файл Fontello в свой App.jsx, он выдает ошибку:

./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'; } /* '' */

Вы можете загрузить полные файлы CSS из здесь (нажмите красную кнопку в правой части страницы).

У меня нет специальной конфигурации для Webpack. И я не уверен, связано ли это с Webpack или нет. Также я пытался удалить node_modules и переустановить пакеты, но это не сработало.

css reactjs fontello

13.12.2020 08:32

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...