vue-cli 3中dart-sass替换node-sass，element ui icon图标乱码问题

现在dart-sass是未来的主流，所以近期把一个老项目node-sass 替换成 dart-sass。

但是却发现另一个问题，icon图标竟然偶尔出现乱码问题。

sass编译unicode图标出现问题

分析了一下这个问题出现的原因，如果一般使用不会出现这个问题，因为一般引入的是element-ui的css文件。

但是为了实现主题色变化，需要用到scss变量引入了scss文件。

@import "~element-ui/packages/theme-chalk/src/index";
1

而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文。

所以通过伪元素来展示的图标如el-icon-edit:before{ content: “\e878”}，编译之后就变成了el-icon-edit:before{ content: “”}，“”便是一个双字节字符，导致出现乱码

/* 编译前 */
.el-icon-edit{content:'\e878'}


/* 编译后 */
.el-icon-edit{content:""}/*# sourceMappingURL=index.css.map */


1
2
3
4
5
6
7
8

解决方法

module.exports = {
	css: {
		loaderOptions: {
			sass: {
				sassOptions: {
					// 生效代码
					outputStyle: 'expanded'
				}	
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

sass的默认输出格式为expanded,编译时不会转换unicode字符。

而sassLoader修改了sass默认输出格式为compressed。

因此我们在配置sassLoader时将输出格式重新改为expanded便能解决问题