一、問題描述
現象：使用若依管理系統(tǒng)作為開發(fā)框架。開發(fā)過程中，圖標一直正常。直到打包發(fā)布到線上，頁面偶發(fā)性出現圖標亂碼問題，再次刷新頁面后，又可正常顯示。
圖標亂碼
必現步驟：線上測試環(huán)境（即代碼build打包發(fā)布的環(huán)境）使用F12打開調試模式，此時刷新頁面，圖標亂碼。
查看此時代碼：瀏覽器調試面板出現兩個圖標樣式，一個正常，一個亂碼。此時使用的是亂碼的樣式。
瀏覽器代碼分析
檢查文件dist/css/app.xxx.css，發(fā)現所有的圖標樣式content的文本均異常。如：
.el-icon-ice-cream-square:before{content:""}。所以我們打包后的樣式文件是有問題的。百度資料大多數人說是sass-dart問題。
打包后的樣式文件
二、解決方案(個人建議使用方案2)
方案1：修改sass為node-sass
大多數人，包括若依開發(fā)人員也使用此方法，但我試了之后并沒有解決問題。而且node-sass在國內網絡環(huán)境經常在下載依賴時會出現問題。 和我一樣的人直接看【方案2】。
（1）卸載sass，安裝node-sass
npm uninstall sass
npm install node-sass -D
若依官方開發(fā)人員也使用此方法，代碼提交記錄如下：
（2）安裝后還要記得替換語法。找到項目的::v-deep替換成/deep/。
代碼提交記錄地址：
https://gitee.com/y_project/RuoYi-Vue/commit/c6912ca1d5712d29f97600fcebe0411d5d9bd25c
https://gitee.com/y_project/RuoYi-Vue/commit/5fcf342f5a08cc7dec3bdd53445c6c5c69c52b80
方案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在國內網絡環(huán)境有時會下載不成功，并且需要對應修改一些css代碼寫法，較為麻煩。
方案2實現簡單，不需修改原先代碼，很棒！
