9月文章分享

source/_posts/被多次吐槽的elementUI 图标乱码问题终于解决了 .md

+---
+title: 被多次吐槽的elementUI 图标乱码问题终于解决了           
+date: 2023/9/26 19:48:20
+tags:                    
+- 前端
+- elementUI
+- vue            
+author: 李燕         
+---
+
+#### 现象：图标乱码
+
+参与做的Vue2+elementUI的项目中，图标偶尔会出现乱码的情况（刷新后就正常了），如下图。
+
+<!-- more -->
+
+![1.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3d2fde084874c0e8e605f1cc6ca79ff~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=818&h=181&e=png&b=ffffff)
+
+一开始以为是阿里图标库的问题，因为上图中的图标我们是从阿里图标库引入的，而不是elementUI自带的。
+
+然后我们就把阿里图标库的引入方式由在线引入改为存到本地使用，但是乱码问题依然存在。
+
+#### 本质：编译问题
+
+在网上一番搜索，终于找到出现乱码的原因，是sass编译的问题。
+
+.scss文件中通过伪元素方式添加的图标，经过sass编译后，样式中的content会变成乱码，如下：
+
+![2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/073c4da21d614d0f8992d910a57c8244~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=240&h=58&e=png&b=fffefe)
+
+(el-select组件使用elementUI自带的图标)
+
+![3.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7fc17b17f2842b7836ee303309fe28b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=269&h=76&e=png&b=fffefe)
+
+（el-select组件使用阿里图标库的图标）
+
+el-select组件使用阿里图标库的图标经项目中的sass编译产生问题还能理解，那为什么el-select组件使用elementUI自带的图标也会产生编译问题呢？
+
+因为项目中引用elementUI时，需要改主题色，就引入了包含了icon.scss的elementUI scss样式文件，该文件经过sass 会重新编译。但如果引入的是elementui 编译后的css 文件，sass就不会再编译了。
+
+![4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25756c60fe6d4c32921af0abf6ad8c0b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1241&h=348&e=png&b=1e1e1e)
+
+#### 解决：两种策略
+
+##### 一、更改写法：通过伪元素方式添加的图标均放到.css文件中，不用sass写法。
+
+1.如果项目中在使用elementUI组件时直接用组件自带的图标，则只需在main.js中加入如下代码即可：
+
+```
+import 'element-ui/lib/theme-chalk/icon.css'
+```
+
+前提是检查element-ui/packages/theme-chalk/src/index文件中，是否引入了icon.scss文件。
+
+如果未引入，则直接加如上一行代码就行。
+
+如果引入了，则还需要修改项目里自定义element-ui主题的文件element-variables.scss。这个文件里本来有一个引入所有element组件scss文件的一行代码，如下。
+
+```
+@import "~element-ui/packages/theme-chalk/src/index";
+```
+
+把这一行去掉，然后直接引入所有的scss文件，除了icon.scss。
+
+如下：
+
+```
+​
+@import "~element-ui/packages/theme-chalk/src/common/transition.scss";
+@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";
+...
+```
+
+2.如果项目中有在.scss文件中通过伪元素方式添加图标，则需要单独建立一个icon.css文件，把所有sass写法的图标改成css写法并放到icon.css文件中，然后再在main.js文件中引入：
+
+```
+import './styles/icon.css'
+```
+
+检查自己的项目，按照以上操作，即可解决问题。
+
+##### 二、升级版本，添加配置
+
+1.  将sass升级到1.39.0及以上版本
+
+1.  vue.config.js添加配置：
+
+    ```
+    module.exports = {
+        ...
+        css: {
+            loaderOptions: {
+              scss: { 
+                sassOptions: { outputStyle: 'expanded' } 
+              }
+            }
+          },
+          ...
+    }
+    ```
+
+    若编译时出现如下提示
+
+    ```
+    DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
+    ```
+
+    则执行以下命令：
+
+    ```
+    $ npm install -g sass-migrator
+    $ sass-migrator division **/*.scss
+    ```
+
+    具体参考：<https://blog.csdn.net/qq_38951259/article/details/127278847>
+
+    按照此方法，同样可以解决问题。
+
+##### 三、其他
+
+1.因项目中使用的sass默认是dart-sass，而elementUI中用的是node-sass。所以有网友建议卸载sass，安装node-sass。
+
+2.还有网友建议保持已有的sass，然后安装css-unicode-loader插件，安装后在webpack配置针对scss、sass的文件loader中，在sass-loader前加上css-unicode-loader。
+
+这两种方式我也尝试了一下，但是没有成功，有兴趣的可以去试试。
+
+#### 验证：两种方式
+
+##### 一. 按F12打开控制台，看样式代码
+
+![5.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7146c467d4fa40eba3e93e49faa73777~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=273&h=68&e=png&b=fffefe)
+
+如果对应图标的content像图中显示，则代表正常了，不乱码了。
+
+##### 二、按F12后再多次按F5刷新
+
+找到问题页面，按F12打开控制台后，如果多次刷新页面，图标都正常，说明乱码问题修复了。
\ No newline at end of file