I'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following error
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.4, but postcss-import uses 7.0.35. Perhaps this is the source of the error below.
Error: Failed to find '~#fortawesome/fontawesome-free/scss/brands'
App.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Webpack.mix
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
Webpack config
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
First, set up
webpack.mix.js as follows:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
2.- Go ahead and install fontawesome:
npm install --save #fortawesome/fontawesome-free
3.- Create a new file "resources/sass/app.scss" and include the following:
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
4.- Execute the following commands:
npm install && npm run dev
and again
npm run dev
.
Steps
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 autoprefixer#latest && npm install laravel-mix#latest && npm install postcss#latest && npm install webpack#latest --save-dev
Install the latest free version of Font Awesome via the npm package manager.
npm install #fortawesome/fontawesome-free --save-dev
Next, build your webpack.mix.js configuration. Please note that the default Laravel 8 install no longer uses SASS (as we did in previous Laravel versions) to compile our CSS assets.
const mix = require('laravel-mix');
mix.setPublicPath('public')
mix.setResourceRoot('../');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
The following dependency entry should now be in
your package.json.
// Font Awesome
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
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!
I have it working by running: npm install font-awesome --save
I created resources/sass/custom.scss and added .sass('resources/sass/custom.scss', 'public/css'); to
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'))
.sass('resources/sass/custom.scss', 'public/css');
in webpack.mix.js.
Then adding #import "node_modules/font-awesome/scss/font-awesome.scss"; to resources/sass/custom.scss.
After running npm run watch font awesome was available.
I know this is old but for anyone else this is my process; Laravel 8 framework, Webpack, Laravel Mix.
In my webpack.mix.js file I use the following:
if (mix.inProduction()) {
mix.copy('node_modules/#fortawesome/fontawesome-free/webfonts', 'public/fonts/font-awesome');
}
I then run this once before I start development:
npm run production
This copies all font awesome files to the public folder and ensures they are not copied during development.
Then, depending on where you copy your font awesome files to, you need to set the following just before importing font awesome within your main .scss file:
$fa-font-path: "/fonts/font-awesome/";
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Note - if you don't do this, the default font awesome public path referenced in your compiled .css file will be ../webfonts/ and cannot be loaded by your .css file.
I have this same exact problem, I found this question by searching for the solution, but none of the answers here worked.
Somehow, I've just managed to solve this, though I'm afraid it's a rather dirty solution. Perhaps someone with more knowledge of Mix can clean it up.
Here's what I've done in my webpack.mix.js file to fix this:
/*
* slow compile fix: https://github.com/tailwindlabs/tailwindcss/discussions/1514#discussioncomment-51903
*/
const mix = require('laravel-mix');
mix.js(
'resources/js/app.js',
'public/js'
)
.postCss(
'resources/css/tailwind.css',
'public/build/css',
[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
)
.postCss(
'node_modules/#fortawesome/fontawesome-free/css/all.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.postCss(
'resources/css/main.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.combine(
[
`public/build/css/all.css`,
`public/build/css/tailwind.css`,
`public/build/css/main.css`,
],
`public/css/app.css`
)
Check the spelling of fontawesome.
#import '~#fontawesome/fortawesome-free/scss/brands';
#import '~#fontawesome/fortawesome-free/scss/regular';
#import '~#fontawesome/fortawesome-free/scss/solid';
#import '~#fontawesome/fortawesome-free/scss/fontawesome';
I have been learning Laravel (8) and have enjoyed working with tailwindcss. That said there are some things I still wish to use Bootstrap for. I am having trouble locating documentation on how to set up bootstrap with laravel mix in laravel 8. More specifically, in the resources/css/app.css file we put the following for tailwind:
#tailwind base;
#tailwind components;
#tailwind utilities;
but Im not sure what would go here for bootstrap.
I noticed older versions of laravel used php artisan ui bootstrap but that is not available in Laravel 8 from what I have seen.
Run: npm install --save-dev bootstrap jquery popper.js
How your webpack.mix.js should look:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
How your app.scss should look:
#import '~bootstrap/scss/bootstrap';
How your app.js should look:
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');
This is how you could use generated files in your .blade.php files:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>
If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss, change variables you want and change your app.scss to:
#import '~bootstrap/scss/functions';
#import 'variables';
#import '~bootstrap/scss/bootstrap';
You have some helpful documentation on https://getbootstrap.com/docs/4.0/getting-started/webpack/
Laracasts is also quite helpful.
use this steps
npm install bootstrap
npm install #popperjs/core
npm install sass#^1.32
npm install sass-loader
For Bootstrap Sass files, let's create the “scss” folder in /resources and then a new app.scss file in /resources/scss/. Then insert the following line to the /ressources/scss/app.scss file
#import "bootstrap";
For Bootstrap JavaScript, insert the following line to the /resources/js/app.js file :
import "bootstrap";
To compile Bootstrap JavaScript and Sass files with Laravel Mix, you need to edit the /webpack.mix.js file as follows:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
now you can run you command
npm run dev
Now that we have the /public/css/app.css and /public/js/app.js files with Bootstrap included, we can include them on a page (template Blade) via Laravel's asset helper () to use the Bootstrap components
On your Head
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
On your footer
<script src="{{ asset('js/app.js') }}"></script>
now i think he will work enjoy
Seems to be available in Laravel v8.24.0 though.
Be aware that doing this procedure do regenerate the webpack.mix.js.
Steps are:
install laravel ui: composer require laravel/ui
generate scaffolding: php artisan ui bootstrap
optionnaly generate the same for auth: php artisan ui bootstrap --auth
make npm install required packages: npm install
compile assets: npm run dev or npm run production (for development or for production)
Then make sure to have the following in your blade templates:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I have clear Laravel 5.7 installation and I need to install izimodal package
So I have installed by npm install izimodal.
For the next step, I initialized this package in my /resources/js/bootstrap.js like:
import iziModal from 'izimodal/js/iziModal';
$.fn.iziModal = iziModal;
and run npm run dev to compile app.js
At this stage, the package was successfully imported and working but I missing CSS part of izimodal... How can I correctly initialize this package with CSS? I have tried this code in my webpack.mix.js but it does not work:
mix.copy('node_modules/izimodal/css/iziModal.css', 'resources/css');
mix.styles([
'resources/css/reset.css',
'resources/css/style.css'
], 'public/css/app.css');
Solved. Just added to my app.scss
// npm-package
#import "~izimodal/css/iziModal.css";
// Custom CSS
#import "../css/reset.css";
#import "../css/style.css";
I want to use the Tabler administration panel on Laravel. I'm attempting to install Tabler UI with npm.
npm install tabler-ui
I add the tabler package to resources/sass/tabler.scss and then add the SASS file to webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/tabler.scss', 'public/css');
But after trying to npm run watch, I got the following error.
File to import not found or unreadable:
../../../node_modules/bootstrap/scss/bootstrap.scss.
When I check the node_modules/tabler-ui/src/assets/scss/bundle I find a line which imports the bootstrap:
#import '../../../node_modules/bootstrap/scss/bootstrap.scss';
The error is for this line; I think this line should be like this:
#import '~bootstrap/scss/bootstrap.scss';
I cannot change this line because it is in the /node_modules folder. What should I do to solve this problem?
In your app.scss
replace this:
// Bootstrap
#import '~bootstrap/scss/bootstrap';
with this:
// Tabler
#import '~tabler-ui/src/assets/scss/variables';
#import '~bootstrap/scss/bootstrap';
#import '~tabler-ui/src/assets/scss/dashboard/dashboard';
Looks like bootstrap is a peer dependency.
Run npm install bootstrap to install it
I want use sparksuite/simplemde-markdown-editor in Laravel Mix compiling.
I have add this line in app.scss:
#import "node_modules/simplemde/dist/simplemde.min.css";
and this line in app.js:
window.SimpleMDE = require('simplemde');
I want compiling this plugin in my project...
/* in webpack.mix.js file add following lines at the end */
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
After adding Run below command in terminal
npm run dev
(or)
npm run watch