This document provides help to get your Laravel 8 instance running with the latest versions of Laravel Mix and Font Awesome.
Before triggering Laravel Mix, we want Node.js and NPM installed on your machine.
node -v
npm -v
Install Node dependencies for Laravel Mix, Webpack, Autoprefixer, and PostCSS.
npm install -D laravel-mix@latest postcss@latest autoprefixer@latest webpack@latest
Install the latest free version of Font Awesome via the npm package manager.
npm install @fortawesome/fontawesome-free
Next, build your webpack.mix.js configuration. Please note that we are no longer using SASS (as we did in previous Laravel versions) to compile our CSS assets.
const mix = require('laravel-mix');
mix.setResourceRoot("../");
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
])
.options({
processCssUrls: true,
});
The following dependency entry should now be in your package.json.
// Font Awesome
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
In /resources/css/app.css, import one or more styles depending on which icon set you are interested in using.
@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';
Now, we want to update our package.json to use the new Mix CLI. Please change the "scripts" section of package.json to the following.
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
Compile your assets and produce a minified, production-ready build.
npx mix -p
OR
npm run prod
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
Happy Mixing!
Copyright © 2020 Karl Hill.
Provided under the MIT license.
Whether you use these instructions or have learned something from them, please consider supporting me with a star ⭐ and a follow 🔥.