使用Element-UI 之乱码问题

问题描述

dart-sass编译后：content属性异常

页面上乱码图片

正确编译的16进制码

问题解决

解决方法1(不考虑新版的element-ui,不需要部分新的组件)：
若使用的element-ui版本中未使用dart-sass,那本项目可使用node-sass(最好和element-ui使用版本一致)编译，并移除sass

解决方法2(若不考虑变换主题)：
本项目采用了vue-element-admin解决方案

文件路径：src\styles\element-variables.scss
@import "~element-ui/packages/theme-chalk/src/index"; // 注释掉
文件路径：src\main.js
 import 'element-ui/lib/theme-chalk/index.css'  //直接在main.js中加载样式

解释：

1. vue-element-admin 修改了 ElementUI 默认 SCSS变量（修改主题色），el-icon 相关的样式会使用 dart-sass 重新打包到 app.css (app.c5fc6c07.css)文件，打包结果中 el-icon 元素的伪元素 content 属性异常。
2. 修改为在main.js中引用，因为直接采用 elementUI 打包好的样式文件（chunk-elementUI.68c70ad5.css），不需要再重新打包，也就不会出现乱码

解决方法3(目前采用方案)：
css-unicode-loader
对scss文件增加一层loader来将dart-scss编译成的css文件(app.c5fc6c07.css)里面的双字节字符再转回16进制码