How to Install Font Awesome in Laravel Mix

Question

I've tried to install Font Awesome using Laravel Mix but when executing run npm dev I get the following message:

ERROR Failed to compile with 1 errors
error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 1)

I removed the comments in the file and tried to change font paths, but it did not solve the problem.

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')    .sass('resources/assets/sass/app.scss', 'public/css')    .copy('node_modules/font-awesome/fonts/', 'public/fonts')    .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')    .version(); 

fontawesome.scss

@import "variables"; @import "mixins"; @import "path"; @import "core"; @import "larger"; @import "fixed-width"; @import "list"; @import "bordered-pulled"; @import "animated"; @import "rotated-flipped"; @import "stacked"; @import "icons"; @import "screen-reader"; 

_variable.scss

// Variables // --------------------------  $fa-font-path:        "../fonts" !default; $fa-font-size-base:   14px !default; $fa-line-height-base: 1 !default; // $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly $fa-css-prefix:       fa !default; $fa-version:          "4.7.0" !default; $fa-border-color:     #eee !default; $fa-inverse:          #fff !default; $fa-li-width:         (30em / 14) !default; // Continue... 

Answer 1

To install font-awesome you first should install it with npm. So in your project root directory type:

npm install font-awesome --save 

(Of course I assume you have node.js and npm already installed. And you've done npm install in your projects root directory)

Then edit the resources/assets/sass/app.scss file and add at the top this line:

@import "node_modules/font-awesome/scss/font-awesome.scss"; 

Now you can do for example:

npm run dev 

This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:

npm run production 

And then you can use the font.