现在dart-sass是未来的主流,所以近期把一个老项目node-sass 替换成 dart-sass。
但是却发现另一个问题,icon图标竟然偶尔出现乱码问题。
sass编译unicode图标出现问题
分析了一下这个问题出现的原因,如果一般使用不会出现这个问题,因为一般引入的是element-ui的css文件。
但是为了实现主题色变化,需要用到scss变量引入了scss文件。
@import "~element-ui/packages/theme-chalk/src/index";
而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 */
解决方法
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
// 生效代码
outputStyle: 'expanded'
}
}
}
}
}
sass的默认输出格式为expanded,编译时不会转换unicode字符。
而sassLoader修改了sass默认输出格式为compressed。
因此我们在配置sassLoader时将输出格式重新改为expanded便能解决问题