React组件不会导入字体真棒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>) 
    } 
} 

我已导入font-awesome.less，但该图标未显示在浏览器上。我可以看到在dom上设置了类名，但没有与dom关联的css风格。我也尝试导入如下的css文件，但它仍然不起作用。

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

什么错我的代码？

Answer 1

确保你有一个的WebPack的less装载机：

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" }