問題

使用 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;
}

相關文章