问题
工程在打包部署后，有时候会出现ElementUI icon乱码问题如下图：
所用依赖：
- vue 2.X
- element ui 2.13.X
- sass: 1.26.8
- sass-loader: 8.0.2
原因
sass版本太低。
解决方案
方案一：
该方案百度出来的，本人没有使用。
ElementUI 使用的是 node-sass， 该项目使用 dart-sass ，所以可以卸载sass, 安装node-sass;
npm uninstall sass
npm install node-sass -D
方案二：
本人使用该方案成功解决。
需要升级sass版本，及对应的sass-loader
并在vue.config.js中添加配置：
css: {
// 避免dart-sass将伪元素中的字符集转义
loaderOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
},
But, 并没有结束，坑来了！！！请继续。。。
升级sass后，遇到的坑
原因： elementUI 中样式有不支持的语法#{$--tooltip-arrow-size / 2},不支持“/”，所以把sass版本再降级到1.32.6，就支持了。
注意
需要注意的是使用dart-sass 深度选择器要使用::deep, 不支持/deep/
<style scoped>
/* DEPRECATED >>> 和 /deep/ 也废弃了 */
::v-deep .bar {}
/* deep selectors */
::v-deep(.foo) {}
/* targeting slot content 子组件内修改 slot 样式 */
::v-slotted(.foo) {}
/* one-off global rule 全局范围 */
::v-global(.foo) {}
</style>
参考了很多文章，这篇文章还算深入juejin.cn/post/695165…
其中对于深度选择器官方文档这么介绍：
Sometimes we may want to explicitly make a rule target child components.
Originally we supported the `>>>` combinator to make the selector "deep". However, some CSS pre-processors such as SASS has issues parsing it since this is not an official CSS combinator.
We later switched to `/deep/`, which was once an actual proposed addition to CSS (and even natively shipped in Chrome), but later dropped. This caused confusion for some users, since they worry that using `/deep/` in Vue SFCs would make their code not supported in browsers that have dropped the feature. However, just like `>>>`, `/deep/` is only used as a compile-time hint by Vue's SFC compiler to rewrite the selector, and is removed in the final CSS.
To avoid the confusion of the dropped `/deep/` combinator, we introduced yet another custom combinator, `::v-deep`, this time being more explicit that this is a Vue-specific extension, and using the pseudo-element syntax so that any pre-processor should be able to parse it.
The previous versions of the deep combinator are still supported for compatibility reasons in the current [Vue 2 SFC compiler](https://github.com/vuejs/component-compiler-utils), which again, can be confusing to users. In v3, we are deprecating the support for `>>>` and `/deep/`.
As we were working on the new SFC compiler for v3, we noticed that CSS pseudo elements are in fact semantically NOT [combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators). It is more consistent with idiomatic CSS for pseudo elements to accept arguments instead, so we are also making `::v-deep()` work that way. The current usage of `::v-deep` as a combinator is still supported, however it is considered deprecated and will raise a warning.
