Я пытаюсь скомпилировать файлы Font Awesome SCSS в приложении Laravel. Шрифт Awesome установлен с помощью NPM. Скомпилированный CSS хранится в папке public / css /. Также создана папка public / fonts /. Но URL-адреса в скомпилированном файле CSS приводят к «/ fonts /», поэтому он будет искать шрифты в «public / css / fonts». Что не так.
Вопросы.
1. Я пытаюсь выяснить, почему Laravel создает папку «public / fonts», но генерирует URL «/ fonts /» в файле CSS вместо «../fonts/»?
2. Я знаю, что есть опция с именем processCssUrls: false, которая решает эту проблему. В документации говорится, что перезапись URL-адресов полезна, но насколько она полезна, если она генерирует неправильные URL-адреса?
3. И мне интересно, должно ли это работать так? Есть ли объяснение этому вопросу?
Странно, что функция Laravel по умолчанию не работает должным образом. На рисунке 1 вы можете увидеть структуру папок после компиляции и сгенерированный файл CSS с неправильными URL-адресами. На рисунке 2 вы можете увидеть решение этой проблемы. Но это будет работать до перекомпиляции. Добавлены фрагменты кода файлов SCSS и webpack.mix.js.
Рисунок 1. Папка «шрифты» и неправильные URL-адреса CSS, созданные после компиляции
Рисунок 2 - Все работает после изменения пути вручную
1. Файл SCSS:
// Variables
@import 'variables';
// FontAwsome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
2. Файл webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/fawesome.scss', 'public/css')
// Work with this
.options({
processCssUrls: false
});