vue使用elementUI项目打包后偶尔会出现图标乱码的情况,刷新页面后图标又能正常显示
解决方式
vue.config.js
中配置sass-loader
module.exports = {
css: {
loaderOptions: {
sass: {
implementation: require('sass'),
sassOptions: {
// 生效代码
outputStyle: 'expanded'
}
}
}
}
}
出现问题原因
sass编译unicode图标出现问题
在项目新版本中使用了官方推荐的sass
(即dart-sass
)库替换了原node-sass
库
而这两个sass库在编译含有unicode
字符的文件且输出格式为compressed
(尽可能减少编译后的文件体积)时,存在以下差异
- scss文件
.el-icon-edit {
content: '\e878';
}
- 运行命令
// sass
sass index.scss index.css --style=compressed
// node-sass
node-sass index.scss --output-style=compressed index.css
- 输出结果
/* sass输出 */
.el-icon-edit{content:""}/*# sourceMappingURL=index.css.map */
/* node-sass输出 */
.el-icon-edit{content:'\e878'}
sass
在编译时为压缩体积,转换了unicode
字符
修改element-ui sass变量
当我们在项目中正常引入图标或elementUI的css样式时,不会存在sass
的编译问题
可是当我们修改element-ui的sass变量时,我们使用了以下代码
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
引入的scss
文件在项目打包时被sass
重新编译,包括含有unicode
字符的icon.scss
文件
所以在一些解决方案中,通过逐个引入除icon.scss文件之外的其他scss文件的方式来解决问题
sassLoader默认输出格式
sass
的默认输出格式为expanded
,编译时不会转换unicode
字符
/* 使用expanded格式输出 */
.el-icon-edit {
content: "\e878";
}
而sassLoader
修改了sass
默认输出格式为compressed
所以我们在配置sassLoader
时将输出格式重新改为expanded
便能解决问题