反应组件不导入字体真棒少/ css文件答案

【问题标题】：React component doesn't import font awesome less/css file反应组件不导入字体真棒少/ css文件
【发布时间】：2017-05-12 17:42:09
【问题描述】：

我正在尝试在我的应用程序中使用 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'

我的代码有什么问题？

【问题讨论】：

你能看看有没有从 font-awesome 注入或加载的样式？

标签： reactjs webpack font-awesome

【解决方案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" }

【讨论】：