How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

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

Use

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

where the $fa-font-path variable is seen in font-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default; 

The tilde "~" is interpolated by sass-loader using the webpack mecanism.

Answer 2

There doesn't appear to be any way to @import files that have their own relative paths in SCSS \ SASS.

So instead I managed to get this to work:

• Import the scss \ css font-awesome file in my .js or .jsx files, not my stylesheet files:

  import 'font-awesome/scss/font-awesome.scss';    

• Add this to my webpack.config file:

     module:     {         loaders:         [             {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },             {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },             {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},                      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},             {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},             {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},             {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},             {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},         ]     }