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-awesom         


        

Answer 1

Following worked for me:

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

This is to import the font-awesome & required fonts in the project. Other change is in webpack configurations, to load required fonts using file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}