elementui 打包后图标加载偶尔会乱码

vue、Element-UI 图标偶发性乱码问题解决方案

elementUi icon有时乱码。

variables.scss去掉icon.css文件引入。main.js中引入icon.css。安装node-sass。

解决方法：在 vue.config.js 中添加。

本项目是若依作为开发框架（elemen-ui + vue + sass），开发过程中，图标一直正常。直到打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示。 本项目使用的依赖包是sass（dart-sass），elementui使用的是node-sass，而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，编译之后就变成了“”，“”便是一个双字节字符，导致出现乱码。

最近复现出一个bug：基于若依的开源项目改动的后台管理系统打包上线后图标会出现乱码现象（复现的时侯没截图，见谅哈），比如向下的箭头呀会变成乱码，刷新后又好了，而且是偶尔出现这个现象以至于我们测试都没测出来。 在网上看了解决方法，也会有问题吧，我把我的踩坑说一下吧： 首先说是出现乱码肯定是样式冲突，网上说是用了dart-sass，但我找了package.json并没有安装dart-sass啊，是用了sass和sass-loader，我仔细看依赖包的node_modules，发现sass文件夹里有一个dart的

Element-UI图标偶发性乱码问题完美解决

elementui的icon图标偶发性乱码解决方案（已解决）

使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况 一顿搜索之后,大多数的原因是这两个造成的 一、element-ui版本原因 1.版本过低,有些图标在低的版本当中并没有支持,所以讲elementui卸载后重新装最新的版本 在项目中升级ElementUI需要先卸载原先的版本,在命令行中输入： npm uninstall element-ui 2.重新安装需要的版本 npm install element-ui –S （安装最新版本

昨天在 vue 项目中编写 element-ui 的树形结构的表格，发现项目中无法生效，定位问题之后发现项目使用的 element-ui 的版本是 2.4.11。这个 BASE_URL 是样式渲染的根目录，通过拼接可以看出来，BASE_URL = ‘/static’，也就是说，在渲染样式的时候，定位到 /static 目录下。有知道的请评论区告诉我）。而在 element-ui-2.15.14 版本下，系统还会加载 font 目录下的两个文件，由于我所在项目配置问题，所以扫描的路径是基于当前路径。

参考： https://blog.csdn.net/weixin_43845090/article/details/120850617 网上大部分解决办法是说将dart-sass替换为node-sass，elementUI官方使用的确实是node-sass，但是node-sass已经不再是主流，并且node-sass经常安装失败。 主要原因是dart-sass在打包过程中会将伪元素content中的内容转义，修改配置即可 css: { // 避免dart-sass将伪元素中的字符集转义