Laravel Mix : Compiller Font Awesome

Cet article fournit de l’aide pour faire fonctionner votre instance Laravel avec les dernières versions de Laravel Mix et Font Awesome.

Créez votre fichier de configuration webpack.mix.js.

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

Installer Font Awesome via npm.

npm install @fortawesome/fontawesome-free

Ce sera maintenant dans votre fichier package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.0",

Dans votre fichier /resources/sass/app.scss importer un plusieurs styles.

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Compilons nos assets et produisons une version minifiée, prête pour la production.

npm run production

Enfin, référencez votre fichier CSS généré dans vos template blade.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">