How to configure webpack to load glyphicons/font-awesome icons in React

Question

When use bootstrap in react project, run dev environment work fine. but when I run npm build for package project. show bootstrap font error.

ERROR in ./~/boo         


        

Answer 1

I have come across a solutions to this:

webpack.config.js

 module: {
    preLoaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader'}
    ],
    loaders: [
        {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
        {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
}

Make sure to install all these loaders

npm i jshint-loader style-loader css-loader less-loader url file --save-dev

After this import bootstrap in you file as

require('bootstrap/less/bootstrap.less');