Laravel-mix: Trying to incorporate Font Awesome via NPM

[collegeman]

• Laravel Mix Version: 0.6.3
• Node Version (node -v): 7.3.0
• NPM Version (npm -v): 3.10.10
• OS: macOS Sierra 10.12.2

Description:

I'm trying to use Font Awesome in a new Laravel 5.4 project.

I ran this command:

npm install font-awesome --save-dev

It installed ^4.7.0. I added this line to my app.scss:

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

I ran this command:

npm run watch

I get the following error output:

     WAIT  Compiling...                                                                        5:41:54 PM

 95% emitting                                                                      

 ERROR  Failed to compile with 3 errors                                                    5:41:56 PM

 error  in ./resources/assets/sass/app.scss

Module build failed: Error
    at factoryCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/Compilation.js:259:39)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:234:19
    at onDoneResolving (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:59:20)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:126:20
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:3694:9
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:934:13)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:840:16
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:3691:13
    at apply (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:21:25)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:56:12
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:121:22
    at onResolved (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:283:15
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/sass/app.scss

Module build failed: Error
    at factoryCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/Compilation.js:259:39)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:234:19
    at onDoneResolving (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:59:20)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:126:20
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:3694:9
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:934:13)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:840:16
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:3691:13
    at apply (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:21:25)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/async/dist/async.js:56:12
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/webpack/lib/NormalModuleFactory.js:121:22
    at onResolved (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:283:15
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

 error  

/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/extract-text-webpack-plugin/loader.js??ref--5-0!/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/style-loader/index.js!/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/css-loader/index.js!/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/postcss-loader/index.js!/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/resolve-url-loader/index.js!/Users/aaron/repos/oldrivercreative/cps-engagement/node_modules/sass-loader/index.js??ref--5-5!/Users/aaron/repos/oldrivercreative/cps-engagement/resources/assets/sass/app.scss doesn't export content

[JeffreyWay]

I just created a fresh Laravel project, and then pulled in Font Awesome. Everything compiled properly.

To start, can you upgrade your version of Laravel Mix to the current release? 0.8.1.

[collegeman]

I will update it. Can you tell me how you incorporated font-awesome?
On Thu, Feb 16, 2017 at 6:02 PM Jeffrey Way [e-mail]
wrote:

I just created a fresh Laravel project, and then pulled in Font Awesome.
Everything compiled properly.

To start, can you upgrade your version of Laravel Mix to the current
release? 0.8.1.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/JeffreyWay/laravel-mix/issues/403#issuecomment-280491961,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHV_JPDK-J8fsTuocYtTsc2adAziQUTks5rdNV-gaJpZM4MDpJf
.

>

Aaron Collegeman
Owner, Fat Panda
540-335-9013
[email protected]

[JeffreyWay]

I did the exact steps that you provided.

[QWp6t]

$fa-font-path: '~font-awesome/fonts'; // this would normally go in a settings/variables file

@import "~font-awesome/scss/font-awesome"; // this would go with the rest of your imports

[collegeman]

@JeffreyWay Upgrading laravel-mix to ~0.8 did the trick!

@QWp6t, I'm not sure that what you're describing works in context, so just for clarity, what is working for me:

1. npm install font-awesome (currently installing ^4.7.0)

2. I'm building a Laravel 5.4 app, so to my resources/assets/sass/app.scss file I added:

// Font Awesome
$fa-font-path: "../fonts";
@import "node_modules/font-awesome/scss/font-awesome";

1. To my ./webpack.mix.js, I added

mix.copy('node_modules/font-awesome/fonts', 'public/fonts');

That's all there was to it!

[JeffreyWay]

You shouldn't even need to manually copy the fonts over. Webpack will do that for you. Here is the code I used, and it automatically copied the fonts to public/fonts.

https://www.dropbox.com/s/7a4fs2ovaye6e2q/Screenshot%202017-02-16%2021.23.22.png?dl=0

Anyways, glad you got it all sorted out. :)

Oh, also, you can use a tilde as an alias for the node_modules directory.

[collegeman]

@JeffreyWay You're right! Works great.

[Necare]

@JeffreyWay I am very sorry to say your link doesn't works anymore, so I am unable to take a look into the code... :(
Would you mind to upload the code again?

Thank you very much.

[robertsanseries]

@JeffreyWay The code is no longer available! : -1: Always use https://gist.github.com/ to avoid these issues!