I failed to install Font Awesome in Laravel 8 app - laravel

Question

I want to add Font Awesome in my Laravel 8/Tailwind CSS 2.0.1 application, and after searching, I install it the following way.
npm install font-awesome --save
Then I add the line in the file /mnt/_work_sdb8/wwwroot/lar/Hostels4/resources/css/app.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import "node_modules/font-awesome/scss/font-awesome.scss";
I get an error.
ERROR in ./resources/css/app.css Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'node_modules/font-awesome/scss/font-awesome.scss'
But I found the referenced file in...
node_modules/font-awesome/scss$ ls -la
total 105
drwxrwxrwx 1 root root 4096 May 21 14:12 .
drwxrwxrwx 1 root root 4096 May 21 14:12 ..
-rwxrwxrwx 1 root root 715 Oct 25 2016 _animated.scss
-rwxrwxrwx 1 root root 592 Oct 25 2016 _bordered-pulled.scss
-rwxrwxrwx 1 root root 459 Oct 25 2016 _core.scss
-rwxrwxrwx 1 root root 120 Oct 25 2016 _fixed-width.scss
-rwxrwxrwx 1 root root 430 Oct 25 2016 font-awesome.scss
-rwxrwxrwx 1 root root 50498 Oct 25 2016 _icons.scss
-rwxrwxrwx 1 root root 375 Oct 25 2016 _larger.scss
-rwxrwxrwx 1 root root 378 Oct 25 2016 _list.scss
-rwxrwxrwx 1 root root 1637 Oct 25 2016 _mixins.scss
-rwxrwxrwx 1 root root 783 Oct 25 2016 _path.scss
-rwxrwxrwx 1 root root 672 Oct 25 2016 _rotated-flipped.scss
-rwxrwxrwx 1 root root 134 Oct 25 2016 _screen-reader.scss
-rwxrwxrwx 1 root root 482 Oct 25 2016 _stacked.scss
-rwxrwxrwx 1 root root 22644 Oct 25 2016 _variables.scss
And in webpack.mix.js file resources/css/app.css is included by install:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
$ node -v
v14.16.0
$ npm -v
7.14.0
$ php artisan --version
Laravel Framework 8.42.1
What is wrong, and how can it be fixed?
MODIFIED :
I found referenced dir with files :
/node_modules/font-awesome/css$ ls -la
total 100
drwxrwxrwx 1 root root 0 May 21 14:12 .
drwxrwxrwx 1 root root 4096 May 21 14:12 ..
-rwxrwxrwx 1 root root 37414 Oct 25 2016 font-awesome.css
-rwxrwxrwx 1 root root 21778 Oct 25 2016 font-awesome.css.map
-rwxrwxrwx 1 root root 31000 Oct 25 2016 font-awesome.min.css
But modifying file resources/css/app.css:
#import "node_modules/font-awesome/css/font-awesome.css";
I still see error :
ERROR in ./resources/css/app.css Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'node_modules/font-awesome/css/font-awesome.css'
It seems that I set the path/filename correctly, but why the error?

Answer 1

Since Laravel 8 now uses PostCSS you will likely want to ditch SASS and use CSS. The following is the proper way to do that.
First, install the latest free version of Font Awesome.
npm install -D #fortawesome/fontawesome-free
Add one or more of the Font Awesome CSS libraries.
app.css
#import '~#fortawesome/fontawesome-free/css/fontawesome';
#import '~#fortawesome/fontawesome-free/css/regular';
#import '~#fortawesome/fontawesome-free/css/solid';
#import '~#fortawesome/fontawesome-free/css/brands';
Then run...
npm run prod
Please reference this document.

Answer 2

I found decision for free version:
Install with command
npm install --save #fortawesome/fontawesome-freeI
In app.js added
require('#fortawesome/fontawesome-free/js/all.min.js');
line
With this https://fontawesome.com/icons?d=gallery&p=2&m=free acessible icons

Answer 3

This is what I do for font-awsome after installing it using
npm install --save #fortawesome/fontawesome-free (see https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers )
inside my resources/sass/app.scss
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
then runing npm-run dev should make it work
In your case removing the .scss in the import might already do the trick

Answer 4

You can use this
#import '~font-awesome/css/font-awesome.css';.