Добавление шрифтов в Laravel с использованием npm

Добавление шрифтов в Laravel с использованием npm

Абсолютно не проблема воспользоваться cdn для подгрузки шрифтов, но в некоторых случаях - например, по желанию клиента - может понадобится подключение того или иного шрифта "напрямую". Посмотрим, как это можно сделать в Laravel.

Важно: подразумевается что у Вас установлен Node.js, если нет - самое время его установить.

Будем использовать laravel-mix, потому первое, что следует сделать - зайти в папку проекта и запустить команду:

$ npm install

 

Один из часто используемых шрифтов - иконки Font Awesome. С него и начнём:

$ npm install font-awesome --save-dev

 

В документации не сказано, как компилировать несколько файлов Sass в один файл css. Можно было бы предположить, что это делается так же, как и с обычным css. Другими словами, в файле project/webpack.mix.js написать что-то вроде:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass([
        'node_modules/font-awesome/scss/font-awesome'
        'resources/assets/sass/app.scss'
    ], 'public/css');

 

Однако, такой код выдаст ошибку. Это не означает, что скомпилировать несколько файлов scss в один невозможно. Решение банально - просто нужно импортировать шрифт в файл project/resources/assets/sass/app.scss:

// Fonts
@import '~font-awesome/scss/font-awesome';
...

 

Аналогично поступаем и с другими шрифтами (разумеется, если для них есть соответствующие пакеты на npmjs.com). Например, установим Montserrat:

$ npm install wfk-montserrat --save-dev

 

После чего также импортируем его в project/resources/assets/sass/app.scss, который теперь будет выглядеть так:

@import '~font-awesome/scss/font-awesome';
@import "~wfk-montserrat/montserrat";
...

 

Если же шрифты нужны в папке public, немного подправим webpack.mix.js:

mix.
    ...
   .copy('node_modules/font-awesome/fonts',  'public/fonts');

 

Не забываем npm run dev или npm run watch и, собственно, всё - можно продолжать работать.