How do I load font-awesome using SCSS (SASS) in We

Question

I have font-awesome in my node_modules folder so I try to import it in my main .scss file like so:

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

But Webpack bundling compilation fails, telling me

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

because the font-awesome.scss file refers to a relative path, '../fonts/'.

How can I tell scss \ webpack to @import another file, and use that file's folder as the home folder so that its relative paths work as it expects?

Answer 1

Resolved by changing my app.scss:

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

This way is useful to keep external dependencies unchanged and unversioned.

Answer 2

I just set the path in my main scss file and it works :

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