Отображаемые шрифты имеют неправильный URL-адрес - Laravel Mix

#laravel-mix

Вопрос:

В моем sass есть файл font.scss, который содержит следующее

 @font-face {
  font-weight: 400;
  font-style: normal;
  font-family: "TT Norms Pro Regular";
  src: local("TT Norms Pro Regular"), url("TT Norms Pro Regular.woff") format("woff");
  }

И шрифты находятся в том же каталоге, что и файл sass. Пример;

   /05_fonts
   - fonts.scss
   - TT Norms Pro Regular.woff

Мой основной scss импортирует вышеупомянутые fonts.scss.

Моя проблема в том, что папка шрифтов создана в корне каталога, а не там dist/assets/fonts/ , где мне это нужно.

Изучив проблему, я обнаружил, что могу добавить mix.config.fileLoaderDirs.fonts = 'dist/assets/fonts'; в свой webpack.mix.js файл. Это приводит к тому, что шрифты становятся dist/assets/fonts/ . Но результирующий css тогда;

   @font-face {
    font-weight: 400;
    font-style: normal;
    font-family: "TT Norms Pro Regular";
    src: local("TT Norms Pro Regular"), url("/dist/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf") format("woff");
  }

Что неверно, это должно быть url("/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf")

При добавлении mix.setResourceRoot('dist') , а затем создании mix.config.fileLoaderDirs.fonts = '/assets/fonts'; . Создает assets/fonts папку в корневом каталоге. Опять неверно.

Как я могу вставить шрифты в dist/assets/fonts правильный css url("/dist/assets/fonts/TT Norms Pro Regular.woff") ?

Ответ №1:

Разобрался…

 mix.setPublicPath('dist');
mix.setResourceRoot('/');