Як додати шрифти в Laravel використовуючи npm

22.08.2018 09:53 | Laravel

Абсолютно не проблема скористатися 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 і, власне, все - можна продовжувати працювати.