Я думаю, ошибка связана с использованием @import для включения таблицы стилей Google Fonts. Вероятно, здесь происходит пара вещей:
Когда вы используете @import с S CSS, вы получаете одну таблицу стилей , скопированную в ваших основных стилей. Поскольку это происходит до завершения компиляции, любые ошибки в импортированном CSS будут влиять на способность компилятора проанализировать ваш действительный CSS. Другими словами, ваш CSS полностью действителен, но вы не знаете, что находится в импортированном CSS, что может привести к разрыву финала.
В частности, в случае Google Fonts, в результате CSS фактически генерируется динамически на основе функций вашего браузера. Цель состоит в том, чтобы предоставить только необходимые типы шрифтов и полезные файлы для данного браузера. Поскольку вы включаете CSS Google в скомпилированный CSS, Google не знает, что обслуживать до Node.js (не браузер), и может сломаться.
Даже если Google угадывает, как отправить вам CSS, который будет успешно скомпилирован в вашем SASS-парсере, он не будет содержать всю поддержку шрифтов для каждого браузера, что, в свою очередь, затруднит ваше взаимодействие с пользователем.
* Решения 1020 *
:
CSS файлов, содержащих @import, создают новый HTTP-запрос во время выполнения, чтобы вы могли go этот маршрут. Для этого необходимо исключить импорт из анализатора SASS. У SASS нет отличного способа сделать это, но вы можете попробовать поместить всю строку в кавычки, надеясь заставить SASS игнорировать ее.
"@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap');"
К сожалению, импортированные CSS похожи это блокировка рендеринга во время выполнения. Так что, если Google CSS не может загрузиться по какой-либо причине (например, заблокирована в Китае), это приведет к остановке всего процесса рендеринга до истечения времени ожидания. Все вокруг не очень хорошо.
Лучшая ставка в этом случае - добавить еще один вызов CSS в ваш документ HTML. Да, вы получаете другой запрос, но это не блокирует рендеринг (именно поэтому вы можете получать вспышки неустановленного текста) и значительно упрощает настройку.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap">
<link rel="stylesheet" href="mySiteStyles.css">
</head>