现在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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐