vue项目使用sass导致elementUI图标乱码问题

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便能解决问题