This document provides help on getting your Laravel instance running with the latest versions of Laravel Mix and Font Awesome. Note: This guide is for Laravel versions 5 through 7. If you are using Laravel 8, please go here.
|
|
|
Before triggering Laravel Mix, make sure that Node.js and NPM are installed on your machine.
node -v
npm -v
Install Node dependencies.
npm install
Next, build your webpack.mix.js configuration.
const mix = require('laravel-mix');
mix.setPublicPath('public')
mix.setResourceRoot('../');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Install the latest free version of Font Awesome via the npm package manager.
npm install -D @fortawesome/fontawesome-free
The following dependency entry should now be in your package.json.
// Font Awesome
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
In /resources/sass/app.scss import one or more 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';
Compile your assets and produce a minified, production-ready build.
npm run production
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 © 2021 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 🔥.
I am using Tailwind.
my project contains jetstream /liveware using tailwind (I have the latest laravel version)
app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
I have tried with
//@import '
@fortawesome/fontawesome-free/css/all.css';@fortawesome/fontawesome-free/scss/fontawesome';//@import '
webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};
//mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');
pakage.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@tailwindcss/ui": "^0.6.0",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.8.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",
"font-awesome": "^4.7.0"
}
}