Elment UI 项目打包上线后偶发性图标乱码问题

前两天，现场部署的同事跟我说线上环境有时候会出现图标变成乱码的问题，需要刷新一下才能好，我一开始还以为是现场网络不稳定，后来去网上查了一下，发现这个事很常见，于是跟着网上大佬们的方法开始解决这个问题

一. 具体问题：

vue项目中打包上线后elementUI的icon偶尔会有乱码的问题，在打包上线后快速刷新后会有乱码，或者直接进入项目的时候就已经是乱码的了，刷新后又好了的这种情况。 线上环境偶尔会复现。

二. 发现原因：

一般使用不会出现这个问题，因为一般引入的是element-ui的css文件，问题出在于为了主题色变化啊，需要用到scss变量引入了scss文件。

大佬说的没错，我发现我们公司的项目里确实有个公共的scss样式文件修改了主题色(不知道注释为什么是英文，可能是直接拉的谁的后台管理模版)

dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}，编译之后就变成了el-icon-arrow:before{ content: “”}，“”便是一个双字节字符，导致出现乱码。

三. 解决办法：

1. 对scss文件增加一层loader来将dart-scss编译成的css文件里面的双字节字符再转回16进制码(转载链接：github.com/styzhang/cs…)
2. 安装loader: npm install --save-dev css-unicode-loader

vue.config.js配置

module.exports = {
  configureWebpack: config => {
    const sassLoader = require.resolve('sass-loader');
    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    })
    .forEach(rule => {
       rule.oneOf.forEach(oneOfRule => {
         const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
         oneOfRule.use.splice(sassLoaderIndex, 0,
             { loader: require.resolve("css-unicode-loader") });
       });
     });
   }
   //下面的css配置可以无
   css: {
       loaderOptions: {
           sass: {
               sassOptions: {
                   javascriptEnabled: true
               }
           }
       }
   }
}

重新打包后即可，打包文件dist/css/app.xxxx，可以看到已经正常了