省流：

如果用的sass + sass-loader

直接  npm i -D css-unicode-loader 

然后在webpack配置中，在sass-loader前面配置 css-unicode-loader

一、场景

1、使用element-ui的定制化主体 element-variables.scss文件

2、项目使用sass、sass-loader编译sass、scss文件。（Sass默认是dartSass）

官方推荐的就是dart-sass，以后的主流也是dart

二、现象

打包后上环境测试，偶尔发现乱码问题，经过多次测试发现复发条件为进入页面后在打开F12情况下按F5刷新

可以尝试一下此触发操作：

（1）在有问题的页面，打开F12控制台

（2）随便输入一个页面，例如www.baidu.com

（3）点击浏览器返回按钮，按F5刷新（控制台不要关）

博主此操作很容易复现这个bug

三、原因和解决方案

查找原因过程：

在确定了是dartSass编译问题，在将icon转换成unicode的时候变成了乱码。

而element-ui官方推荐的是node-sass

所以最初解决方案是更换node-sass，经过不少折腾更换完成后，最终是解决了问题。

但是众所周知，node-sass安装非常的不方便，需要设置淘宝镜像，再加上我的是老项目，版本冲突也不少。

所以对我来说最好的方案是保持已有的dart-sass，并且解决这个转换unicode的问题。

那么问题来了，这个bug存在这么久了，有没有好的解决方案呢？

答案是： 有的！！那就是 css-unicode-loader

最终解决方案：

1、 npm i -D css-unicode-loader 

css-uicode-loader/Readme

2、安装后，在webpack配置针对scss、sass的文件loader中，在sass-loader前加上css-unicode-loader；

我的配置

TIP：如果是vue-cil3，那么需要额外在vue.config中这样配置(如上上图）

// vue.config.js

module.exports = {

  configureWebpack: config => {

    config.module.rules.filter(rule => {

      return rule.test.toString().indexOf("scss") !== -1;

    })

      .forEach(rule => {

        rule.oneOf.forEach(oneOfRule => {

          oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,

            { loader: require.resolve("css-unicode-loader")})

        })

      })

    }

}

最后再编译打包上环境，重新复测，大功告成！