Laravel webpack.mix: разрыв строки в строке импорта шрифта появляется при переводе scss в css

#laravel #webpack #import #fonts #laravel-mix

#laravel #webpack #импорт #шрифты #laravel-mix

Вопрос:

Я использую laravel с webpack.mix и импортирую общедоступный шрифт Google в файл app.scss:

 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500amp;display=swap');
  

(в этой первой строке нет пробелов или разрывов строк!)

Команда Webpack.mix выглядит обычной:

  mix.js('resources/js/app.js', 'public/js').sourceMaps()
    .sass('resources/sass/app.scss', 'public/css');
  

и переведите этот файл s css в css.
НО в css я получаю:

 @import url(https://fonts.googleapis.com/css2?family=Rubik:wght@300;

400;500amp;display=swap);
  

Откуда, черт возьми, появляется этот странный разрыв строки ?! Браузер не может видеть шрифт таким образом =
Я попробовал npm запустить dev, запустить prod. Проверьте исходную строку 20 раз…

Ответ №1:

Обходной путь заключается в использовании ; вместо ; в вашей ссылке.

Ссылка: https://github.com/JeffreyWay/laravel-mix/issues/2430#issuecomment-653915587