Sass将Unicode编译成文字字符导致icon乱码问题

发现问题 最近在使用公司组件库中的穿梭框组件时发现icon图标全都乱码了
Sass将Unicode编译成文字字符导致icon乱码问题
文章图片

分析问题 经排查发现,组件样式文件(scss)引入的iconfont矢量图标字体,构建时,\e601这类Unicode字符在经过sass编译后就变成了文字字符(双字节字符),导致出现乱码

.icon-ok:before { content: "\e601"; }

Sass编译后
.icon-ok:before { content: ""; }

解决问题 (1)升级sass版本
Sass将Unicode编译成文字字符导致icon乱码问题
文章图片

Sass@1.38.0版本中对这个问题做了修复,可以将项目中使用的版本上级到1.38.0+,详情查看Sass更新日志
// index.scss .icon-ok:before { content: "\e601"; }

执行npx sass@1.38.0 index.scss index.css
// index.css .icon-ok:before { content: "\e601"; }/*# sourceMappingURL=index.css.map */

(2)自定义webpack loader
【Sass将Unicode编译成文字字符导致icon乱码问题】上面分析问题时说到构建时SassUnicode字符编译成文字字符,那么我们能不能在loader队列中sass-loader后加入我们自定义的loader,将CSS中的文字字符转译成Unicode字符呢?当然是可以的
const CONTENT_MATCH_REG = /(?

    推荐阅读