react + webpack使用阿里iconfont，解决：图标显示小方块

问题

使用 create-react-app 脚手架创建的项目，在使用iconfont时，一直不成功，效果显示为小方块

前置

为了解决组件间样式的污染，使用CSS Modules，附上阮大神教程，

CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件

问题排查

1. 打开浏览器调试

2. 发现：

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

iconfont的class类名，被编译成了一串hash：_3FwiQVW5Npbqs3UVE5uQSC

3. 继续查看编译后代码
   

源代码：

<div className={Style.nav}>
      <span className={Style.navitem}>发现</span>
      <span className={Style.navitem}>关注</span>
      <span className={Style.navitem}>消息</span>              
      <i className="iconfont">&#xe636;</i>
</div>

根本原因

.iconfont 类名被编码， 导致：，无法引用到iconfont样式

webpack 编译时，只对className={Style.navitem}进行了编码， 未对className=""形式编码

解决

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

相关代码：

:global(.iconfont){
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

相关文章

react中使用Iconfont图标
webpack中如何使用iconfont字体图标