React компонент не импортирует шрифт awesome less/css file

Question

Я пытаюсь использовать response-fontawesome в своем приложении. Ниже моя реакция компонентов класса:

import React from 'react' 
import 'font-awesome/less/font-awesome.less' 
import FA from 'react-fontawesome' 

export default class SearchField extends React.Component { 

    render() { 
    return (<div className={this.props.className.length===0?'search-field':this.props.className}> 
     <p>{this.props.text}</p> 
     <FA name='twitter' /> 
    </div>) 
    } 
} 

Я импортирован шрифт awesome.less, но значок не отображается в браузере. Я вижу, что имя класса было установлено на dom, но не существует стиля css, связанного с dom. Я также попытался импортировать файл css, как показано ниже, но он все еще не работает.

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

, что случилось с моим кодом?

Answer 1

Убедитесь, что вы имеете less погрузчик WebPack:

module: { 
    loaders: [ 
     { test: /\.less?$/, loaders: ['style', 'css', 'less'] }   
    ] 
} 

Вы можете даже нужно загрузить иконки (шрифты), как:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }