React 컴포넌트가 글꼴을 가져 오지 않습니다. awesome less/css 파일

Question

내 응용 프로그램에서 react-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>) 
    } 
} 

글꼴을 가져 왔지만 아이콘이 브라우저에 표시되지 않습니다. 클래스 이름이 dom에 설정되어 있지만 dom과 연관된 CSS 스타일이 없다는 것을 알 수 있습니다. 나는 또한 아래와 같은 CSS 파일을 가져 오려고했지만 여전히 작동하지 않습니다.

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

내 코드에 어떤 문제가 있습니까?

Answer 1

당신이 웹팩에 대한 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" }