Sass将Unicode编译成文字字符导致icon乱码问题
发现问题
最近在使用公司组件库中的穿梭框组件时发现icon
图标全都乱码了
文章图片
分析问题
经排查发现,组件样式文件(scss
)引入的iconfont
矢量图标字体,构建时,\e601
这类Unicode
字符在经过sass
编译后就变成了文字字符(双字节字符),导致出现乱码
.icon-ok:before {
content: "\e601";
}
Sass
编译后.icon-ok:before {
content: "";
}
解决问题 (1)升级sass版本
文章图片
在
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乱码问题】上面分析问题时说到构建时
Sass
将Unicode
字符编译成文字字符,那么我们能不能在loader
队列中sass-loader
后加入我们自定义的loader
,将CSS
中的文字字符转译成Unicode
字符呢?当然是可以的const CONTENT_MATCH_REG = /(?
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 即将到手三百万
- 思友人
- 20210307《挑战赛怂人胆》【能量将帅挑战赛(01)】
- 苍灵十二将I|苍灵十二将I 第一百二十五章 关门猎兽
- 那条灰色的人行道
- 《没有你我将会很幸福》
- 《将来的你,一定会感谢现在战胜烦恼的自己-------第四章/第十一节/用逆向思维解除烦恼》
- 牧人将归
- 首届中国苏州江南文化艺术国际旅游节将于8月24日启幕
- 陆军中将谭自平