生产环境Element UI 图标偶现乱码三种解决方案

前言

生产环境图标偶现乱码，本人实践可行使用第一种

问题描述

生产环境图标偶现乱码，刷新页面后又可以了

问题分析

问题出现的条件~使用了自定义主题，且版本配置如下

"element-ui": "^2.15.7",
"sass": "^1.34.0",
"sass-loader": "8.0.2",

element源码采用的打包是node-sass,而我们版本配置的是dart-sass; 编译不兼容

方案一 升级sass

在官方github的issue下看到升级到 "sass": "^1.49.0" 还是有问题的，要升级到 "sass": "^1.52.1" 以及"sass-loader": "10.2.1",

方案二 用node-sass

element 源码官方用的 node-sass 所以将dart-sass 卸载，安装 node-sass

1. npm uninstall sass
2. npm install node-sass -D

方案三 不用sass编译按需引入scss 文件

这个是笨办法，但也有优点，按需引入；具体如下

自定义主题引入入口文件

scss @import "~element-ui/packages/theme-chalk/src/index.scss"; 中的内容解开引用，这里不去写具体内容，指的注意的是以下：
注意将第一个 @import "./base.scss"; 再次解开为： sass @import "./common/transition.scss";
也就是将 内部的./icon.scss 排除掉

然后将elementui编译好的icon.css单独用js进行引入加载，即可解决，以下是完整代码：
`scss
//这里写你的自定义主题变量配置

$--color-primary:#4b6eef;

//将入口文件的引用拆出来引用到这里

@import "~element-ui/packages/theme-chalk/src/pagination.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
@import "~element-ui/packages/theme-chalk/src/autocomplete.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
...

然后配置打包文件