elementui 打包后字体图乱码解决方法

最近在项目中遇到了一个之前一直没遇到过的 bug，项目打包部署后 elementui 字体图标会随机出现乱码 bug，刷新项目后就会正常，之前一直以为是网络异常，后面排查后才发现不是网络的问题，是因为项目是基于若依 ruoyi 框架搭建的，ruoyi 框架内置的 CSS 扩展语言是 sass，而 elementui 官方使用的是 node-sass，所以导致了字体图标乱码 bug 的出现。

正常图标和乱码图标对比

正常图标：

乱码图标：

bug 产生原因

由于项目是基于 ruoyi 框架搭建，ruoyi 内置 CSS 扩展语言是 sass，而 elementui 官方使用的是 node-sass，所以导致了字体图标乱码 bug 的出现。

项目使用sass：

elementui使用node-sass：

如下图所示，项目使用sass打包后的字体图标css样式已经是乱码

解决办法

卸载sass，安装node-sass，方法如下：

// 卸载sass
npm uninstall sass
// 安装node-saa
npm install node-sass -D

注意：npm 安装 node-sass 时，会从 github 上下载 .node 文件。而由于 github 是国外网站，所以在国内下载时间可能会很长，很容易导致超时失败。解决办法可以参照帖子最后的参考内容《node-sass 安装失败的原因及解决办法》。

bug 解决后效果

如图所示，项目里的字体图标已经正常

如图所示，打包后的字体图标css样式也已经正常

参考

• node-sass 安装失败的原因及解决办法 (opens new window)