I failed to install Font Awesome in Laravel 8 app

user_10873713 0
Viewed 2348

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?

font-awesome laravel
4 Answers

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.

user_6334400

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

user_108737130

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

user_87313200

You can use this

@import '~font-awesome/css/font-awesome.css';.

user_84587440
Related