Build:production : error with FontAwesome 5 font path

sage
,
1

Hi,

When I run npm run build:production I get an error saying :

`webpack --progress -p --config resources/assets/build/webpack.config.js

94% asset optimization

ERROR Failed to compile with 2 errors 3:49:03 PM

error in ./resources/assets/styles/main.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./resources/assets/fonts/fontawesome/fa-light-300.eot’… `

The script works fine when I run npm run build

In my _variables.scss I have set this variable (as requested by FontAwesome 5):

$fa-font-path: "./resources/assets/fonts/fontawesome";

Why is there an error when running build:production ?

thanks

1 Like
2

Did you ever find a solution to this? I’m having the same issue (except using FontAwesome 4 and variable is $font-awesome-path: "~font-awesome/scss/font-awesome";)

3

I could be wrong but I don’t think you’re meant to link to fonts in the node module. Remember reading it somewhere in the font awesome docs.

Copy the fonts to resources/assets/fonts and try again. If that fails, you may need to set $fa-font-path: "../fonts" in your SCSS.

4

Thank’s for the reply, you’ve set me in the right direction. As your suggestion might work as well, I’ve fixed it and still use the node module as it’s easier to update. Although I think it’s because of an update the font path variable no longer worked and gave me the error.

Changing the path to

$fa-font-path: "~font-awesome/fonts";

worked for me.

5

Bear in mind that setting $fa-font-path: "~font-awesome/fonts"; won’t necessarily work because that will point to the node_modules/font-awesome/fonts folder and if this folder doesn’t exist on your live website then it would not work.

I’d recommend updating the webpack config to copy fonts from the node module to sage fonts directory so that $fa-font-path: "../fonts"; will always work.

1 Like
6

It’s a little more work, but our best recommendation for using Font Awesome 5 with Sage is @mmirus’s guide here:

4 Likes