vue-cli 3中dart-sass替换node-sass,element ui icon图标乱码问题
node-sass
:rainbow: Node.js bindings to libsass
项目地址:https://gitcode.com/gh_mirrors/no/node-sass
免费下载资源
·
现在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便能解决问题
GitHub 加速计划 / no / node-sass
8.5 K
1.33 K
下载
:rainbow: Node.js bindings to libsass
最近提交(Master分支:2 个月前 )
6081731a
Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4.
- [Release notes](https://github.com/actions/setup-node/releases)
- [Commits](https://github.com/actions/setup-node/compare/v3...v4)
---
updated-dependencies:
- dependency-name: actions/setup-node
dependency-type: direct:production
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
62c0f46c
Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v3...v4)
---
updated-dependencies:
- dependency-name: actions/checkout
dependency-type: direct:production
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)