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上设置了classname，但没有与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" }

React组件不会导入字体awesome less / css文件

1 个答案: