最近一个开发上线过程中，有多位同事(产品与测试)反馈线上前端系统中图标‘偶尔’会出现乱码问题。起初我的第一反应是，是不是字体文件有时候没有加载？可能是Nginx的配置问题阻止了字体文件的加载？
但是如果是Nginx配置问题应该是每次都加载不到字体文件，所以排除。是不是字体文件有时候没有加载？但是通过排查出现乱码的时候字体文件也是加载了，那到底是什么问题呢？
查看打包过后的app.css 文件
为什么iconfont的content是乱码呢？
查看官网是!
为什么打包后悔变成乱码呢？查看资料发现可能是dart-sass 和 node-sass的原因
dart-sass 和 node-sass
这两个有啥区别呢？
相同点
- 都是用来将sass编译成css的工具。
不同点
- node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
dart-sass 是用 drat VM 来编译 sass；
- node-sass是自动编译实时的，dart-sass需要保存后才会生效
推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上
基于 libsass 的 node-sass 将被弃用，官方建议改用 dart-sass。
node_modules中的sass中有sass.dart.js文件说明项目就是用dart-sass编译sass的。
vue-cli 创建项目时会让你选择用dart-sass或者node-sass(目前推荐用dart-sass)。
那么为什么用不同的编译方式编译element-ui中的iconfont会出现乱码呢？那是因为element-ui是用node-sass编译的，所以用dart-sass去build就出现了乱码了。
如何解决问题
1.npm uninstall sass
2.npm install node-sass -D
build项目后css文件icon的css正常显示
