被leader多次吐槽的elementUI 图标乱码问题终于解决了

现象：图标乱码

参与做的Vue2+elementUI的项目中，图标偶尔会出现乱码的情况（刷新后就正常了），如下图。

一开始以为是阿里图标库的问题，因为上图中的图标我们是从阿里图标库引入的，而不是elementUI自带的。

然后我们就把阿里图标库的引入方式由在线引入改为存到本地使用，但是乱码问题依然存在。

本质：编译问题

在网上一番搜索，终于找到出现乱码的原因，是sass编译的问题。

.scss文件中通过伪元素方式添加的图标，经过sass编译后，样式中的content会变成乱码，如下：

(el-select组件使用elementUI自带的图标)

（el-select组件使用阿里图标库的图标）

el-select组件使用阿里图标库的图标经项目中的sass编译产生问题还能理解，那为什么el-select组件使用elementUI自带的图标也会产生编译问题呢？

因为项目中引用elementUI时，需要改主题色，就引入了包含了icon.scss的elementUI scss样式文件，该文件经过sass 会重新编译。但如果引入的是elementui 编译后的css 文件，sass就不会再编译了。

解决：两种策略

一、更改写法：通过伪元素方式添加的图标均放到.css文件中，不用sass写法。

1.如果项目中在使用elementUI组件时直接用组件自带的图标，则只需在main.js中加入如下代码即可：

arduino 复制代码

import 'element-ui/lib/theme-chalk/icon.css'

前提是检查element-ui/packages/theme-chalk/src/index文件中，是否引入了icon.scss文件。

如果未引入，则直接加如上一行代码就行。

如果引入了，则还需要修改项目里自定义element-ui主题的文件element-variables.scss。这个文件里本来有一个引入所有element组件scss文件的一行代码，如下。

scss 复制代码

@import "~element-ui/packages/theme-chalk/src/index";

把这一行去掉，然后直接引入所有的scss文件，除了icon.scss。

如下：

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文件中引入：

arduino 复制代码

import './styles/icon.css'

检查自己的项目，按照以上操作，即可解决问题。

二、升级版本，添加配置

将sass升级到1.39.0及以上版本

vue.config.js添加配置：

css 复制代码

module.exports = {
    ...
    css: {
        loaderOptions: {
          scss: { 
            sassOptions: { outputStyle: 'expanded' } 
          }
        }
      },
      ...
}

若编译时出现如下提示

vbnet 复制代码

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

则执行以下命令：

ruby 复制代码

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

具体参考：blog.csdn.net/qq_38951259...

按照此方法，同样可以解决问题。

三、其他

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打开控制台，看样式代码

如果对应图标的content像图中显示，则代表正常了，不乱码了。

二、按F12后再多次按F5刷新

找到问题页面，按F12打开控制台后，如果多次刷新页面，图标都正常，说明乱码问题修复了。