针对线上element-ui的iconfont乱码问题，node-sass与dart-sass的在线探索之旅

前端

2023-10-26 20:51:23

iconfont乱码问题的追溯

在接到同事的反馈后，我立即着手排查问题。首先，我检查了Nginx的配置，确认字体文件可以正常加载。随后，我排查了前端代码，发现iconfont图标的引用路径没有问题。

node-sass与dart-sass的抉择

由于iconfont图标的引用路径没有问题，我开始怀疑可能是CSS预处理器的问题。我们项目中使用的是node-sass，于是我尝试将node-sass替换为dart-sass，看看是否能解决问题。

dart-sass是一个较新的CSS预处理器，它宣称具有更快的编译速度和更少的依赖项。我按照官方文档的说明，在项目中安装了dart-sass并进行了配置。

问题的解决

令人惊讶的是，将node-sass替换为dart-sass后，iconfont乱码问题消失了。为了进一步验证，我将node-sass重新安装并配置回项目中，问题又重新出现了。

经过一番研究，我发现问题出在node-sass处理CSS字体图标的方式上。node-sass在处理@font-face规则时，会将字体文件的路径嵌入到生成的CSS文件中。然而，在某些情况下，node-sass嵌入的字体文件路径可能不正确，从而导致图标乱码。

dart-sass则不会出现这个问题。它在处理@font-face规则时，会将字体文件的路径保存在一个单独的文件中，并通过URL()函数引用该文件。这种方式确保了字体文件路径的准确性，避免了图标乱码问题。

具体解决方案

为了彻底解决iconfont乱码问题，我将项目中的node-sass替换为dart-sass。同时，我还对Webpack的配置进行了调整，确保dart-sass能够正确处理字体文件。

// Webpack配置
module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        {
          loader: "sass-loader",
          options: {
            implementation: require("sass"),
            sassOptions: {
              fiber: require("fibers"),
            },
          },
        },
      ],
    },
  ],
}