关于sass(dart-sass)构建,Unicode乱码问题

2021-10-28 8

项目使用element-ui + sass(原dart-sass),在使用自定义主题时,生产环境出现element的图标乱码问题。

关于sass(dart-sass)构建,Unicode乱码问题

项目使用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因网络问题,安装可能失败问题

registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/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

评论(0)

0/500

还没有评论,快来抢第一吧