使用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进制码

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容