SCSS Webfont (Font Awesome) Повреждение компиляции с использованием Webpack

При компиляции объявлений содержимого шрифтов в SCSS выходные данные искажаются. Вместо вывода escape-последовательности символов, как я ожидал, например content: \f26e;, загрузчик sass выводит один неотображаемый символ, представленный в виде квадрата, например, content: "";. Символы можно найти как в пакете js, так и в извлеченном CSS.

Вы можете ясно видеть в CSS, который идет с пакетом узла Font Awesome, как он должен быть записан в файл.

.fa-500px:before {
  content: "\f26e"; }

Как это записывается в мой файл

.fa-500px:before {
  content: "";
}

Я пытался создать стили на основе стилей Font Awesome, когда обнаружил проблему. Я решил просто попробовать перекомпилировать Font Awesome, но проблема не исчезла. Я поискал и не нашел никаких ресурсов, указывающих на то, что я делаю это неправильно, но это мое предположение, а не то, что что-то не так с sass-loader Webpack.

Я создал репо, демонстрирующее проблему: https://github.com/rlvandaveer/sass-loader-fontawesome-gist


person Robb Vandaveer    schedule 17.02.2020    source источник


Ответы (1)


Изучив это подробнее, я решил, что это не проблема. Два приведенных выше случая эквивалентны. Первый - это escape-код ASCII, а второй - соответствующий буквальный символ Юникода (который не отображается должным образом). В этом примере репо используется реализация dart sass, которая работает иначе, чем реализация node-sass, к которой я привык. Эта проблема dart-sass подтверждает разницу между двумя реализациями.

Надеюсь, этот ответ избавит кого-нибудь от подобной путаницы.

person Robb Vandaveer    schedule 18.02.2020