vue element 图标偶发性乱码问题解决方案

1.先查找问题，既然是线上出现的问题，先是去查看了打包后的css文件

 发现图标部分都变成了:before{content:“”}

2.解决方法：升级sass版本到1.39.0

 升级之后本地运行和打包时报错

 虽然不影响使用，但想了想还是进行优化

查找原因后发现是因为sass版本更新后抛弃了之前的写法 ，虽然可以继续使用，但会打印报错

To ease the transition, we’ve begun by adding the math.div() function. The / operator still does division for now, but it also prints a deprecation warning when it does so. Users should switch all division to use math.div() instead.

引用文档： https://sass-lang.com/documentation/breaking-changes/slash-div/

3.sass优化解决方法

在文档中说明了修改方法，可以 优化 / 写法

但实现过程中发现需要修改的内容过多，而且也容易出纰漏。而在官方文档中提供了一个更简便的方案。

 

 

 就是利用这个Sass迁移器自动更新依赖里面的样式表,一个一个文件的修改。操作方法：

$ npm install -g sass-migrator
$ sass-migrator division ./node_modules/element-ui/packages/theme-chalk/src/common/var.scss

根据打包时提示的文档路径逐个更新，完成后项目本地打包和运行就不在报错了，而且问题也解决了，但又有了一个问题，因为我改的是node_module里面的源码，而我本地源码是不会更新到线上的，而且如果我删除node-module,再次npm i后我的修改也会消失。

4.node-module修改后的优化方案： 引入使用 patch-package 为依赖打补丁

patch-package npm地址
patch-package github文档

第一步先下载插件

npm install patch-package -D 

第二步在项目package.json中添加命令

 第三步运行需要打补丁的node-modules依赖主文件

 yarn patch-package element-ui

之后项目根目录会出现对应的文件

 然后删除node-modules，重新npm i时出现这个文件，代表补丁生效了

 然后将这个文件夹push到运程仓库后，其他人拉代码npm i时也不会报错