Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trying to incorporate Font Awesome via NPM

See original GitHub issue
  • 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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
JeffreyWaycommented, Feb 17, 2017

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 2017-02-16 21.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.

10reactions
collegemancommented, Feb 17, 2017

@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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using A Package Manager | Font Awesome Docs
Set Up npm Token for a Specific Project. This per-project setup lets you configure each project individually, which can be good for teams...
Read more >
How to use font-awesome icons from node-modules
Install as npm install font-awesome --save-dev. In your development less file, you can either import the whole font awesome less using @import ...
Read more >
font-awesome - npm
Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained by Dave Gandy....
Read more >
How to use font-awesome icons from Node.js-modules?
npm install font -awesome --save. Approach: First, we need to enter the above command in the terminal for installing the package.
Read more >
Trying to incorporate Font Awesome via NPM #403 - GitHub
npm install font -awesome (currently installing ^4.7.0 ) · I'm building a Laravel 5.4 app, so to my resources/assets/sass/app.scss file I added:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Modify sass-loader options in webpack.mix.js file

Next page

npm run <dev|production> hangs after compilation before exiting