项目使用element-ui + sass(原dart-sass),在使用自定义主题时,生产环境出现element的图标乱码问题。
1、原因分析
因为自定义主题是需要将scss加载进来的,而scss中引用的字体不能被对应的loader正常解析(猜测是这个原因),而将element自己便于好的css使用js模块引入就没问题。除自定义主题外,可能其它场景也会出现类似问题。
Dart-sass 编译输出的文件是 UTF-8 编码的 Unicode 明文,如果 Web 服务器配置了 charset=gbk 的响应头(或没有配置 charset 响应头),则浏览器无法正确识别 content 属性里的字符,导致图标出不来。
2、解决方案
2.1、使用node-sass
使用cnpm或者淘宝源代理,解决node-sass因网络问题,安装可能失败问题
2.2、升级sass依赖
注意:该方案会引入新的问题。由于element-ui没有使用math.div代替/
运算符,新版本编译时会提示 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
sass依赖升级到 https://github.com/sass/dart-sass/releases/tag/1.39.0 及以上
若不生效:尝试给sass-loader传入 { outputStyle: "compressed" } 配置
vue-cli:https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
sassOptions: {
outputStyle: 'expanded'
// charset: true
}
}
}
}
}
因为sass-loader 会检查运行环境的模式,给 sass 传入 { outputStyle: "compressed" }。dart-sass 在这时会使用 BOM 而不是输出 @charset。
如果是通过 @vue/cli 搭建的环境,因为有 cssnano 处理压缩,所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
参考文档:
https://github.com/PanJiaChen/vue-element-admin/issues/3526
https://github.com/ElemeFE/element/issues/19247
还没有评论,快来抢第一吧