一、問題描述
現象：使用若依管理系統作為開發框架。開發過程中，圖標一直正常。直到打包發布到線上，頁面偶發性出現圖標亂碼問題，再次刷新頁面后，又可正常顯示。
圖標亂碼
必現步驟：線上測試環境（即代碼build打包發布的環境）使用F12打開調試模式，此時刷新頁面，圖標亂碼。
查看此時代碼：瀏覽器調試面板出現兩個圖標樣式，一個正常，一個亂碼。此時使用的是亂碼的樣式。
瀏覽器代碼分析
檢查文件dist/css/app.xxx.css，發現所有的圖標樣式content的文本均異常。如：
.el-icon-ice-cream-square:before{content:""}。所以我們打包后的樣式文件是有問題的。百度資料大多數人說是
sass-dart問題。
打包后的樣式文件
二、解決方案(個人建議使用方案2)
方案1：修改sass為node-sass
大多數人，包括若依開發人員也使用此方法，但我試了之后並沒有解決問題。而且node-sass在國內網絡環境經常在下載依賴時會出現問題。 和我一樣的人直接看【方案2】。
（1）卸載sass，安裝node-sass
npm uninstall sass
npm install node-sass -D
若依官方開發人員也使用此方法，代碼提交記錄如下：
（2）安裝后還要記得替換語法。找到項目的::v-deep替換成/deep/。
方案2：升級sass、配置vue.config.js
（1）sass版本升級到1.39.0
sass版本升級到1.39.0
（2）vue.config.js 增加css配置，否則會報錯
配置vue.config.js
為方便復制，代碼粘貼如下：
css: {
loaderOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
},
（3）看下效果，完美解決
重新打包項目npm run build,看到原先亂碼的文件dist/css/app.xxx.css不再亂碼了，成功解決！
圖標不再亂碼
三、總結
方案1本人測試不成功，而且node-sass在國內網絡環境有時會下載不成功，並且需要對應修改一些css代碼寫法，較為麻煩。
方案2實現簡單，不需修改原先代碼，很棒！
本文轉載自：
作者：吖蛋黃
鏈接：https://www.jianshu.com/p/efd9d78522d2
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
（本人項目受圖標亂碼煩惱已久，此處轉載也是為了忘記而找不到了，感謝作者：吖蛋黃）