'Font awesome' appropriate loader to handle

Question

I'm trying to include font awesome in my reactjs application and these are the steps i followed.

 1. npm install --save font-awesome

 2. Import it to my jsx file

 import '../../../../../../node_modules/font-awesome/css/font-awesome.min.css';

 3. Adding url-loader to my webpack.config.js 

            {
                test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/,
                loader: 'url-loader?limit=100000'
            }

But i'm getting this issue.How can i fix this?

../~/font-awesome/css/font-awesome.min.css Module parse failed: C:\Users\admin\Documents\revegator-platform\node_modules\font-awesome\css\font-awesome.min.css Unexpected character '@' (4:3) You may need an appropriate loader to handle this file type.

My webpack.config.js

'use strict';
let path = require('path');

module.exports = {
    entry: path.resolve('./src/main.js'),
    output: {
        path: path.resolve('../public/js'),
        filename: 'build.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test:  /\.s[a|c]ss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
};

Answer 1

Evidently, you support sass in your app, so why not use font-awesome scss resources? This should give you the flexibility to load only what you need therefore reducing the final css size.

Make sure you have the following packages

 npm i --dev "css-loader" "file-loader" "node-sass" "sass-loader" "style-loader" "url-loader"

update your webpack.config.js to contain the following loaders

  {
    test: /\.s[a|c]ss$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "sass-loader"
      }
    ]
  },
  {
    test: /\.(png|gif|jpg|cur)$/i,
    loader: 'url-loader',
    options: {
       limit: 8192
    }
  },
  {
    test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
    loader: 'url-loader',
    options: {
      limit: 10000,
      mimetype: 'application/font-woff2'
    }
  },
  {
     test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
     loader: 'url-loader',
     options: {
       limit: 10000,
       mimetype: 'application/font-woff'
     }
   },
   {
     test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
     loader: 'file-loader'
   }

in your component

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