'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]'
                }
            }
        ]
    }
};

Unknown Unknown · Accepted Answer · 2017-08-10T07:10:20

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

'Font awesome' appropriate loader to handle

1 Answers