Webpack打包CSS修改字符集导致字体图标编码异常如何解决？

问题原因 #

你遇到的转义替换是css-loader和CSS压缩工具的默认行为：默认会把CSS中\f2e9这类Unicode转义序列直接转换为对应的Unicode实体字符，打包后呈现为单个特殊字符，并非内容损坏，只是和原始书写格式不一致。

解决方案 #

方案1：调整loader配置（无需修改CSS源码，推荐） #

修改webpack配置中css-loader的参数，如果你使用了CSS压缩插件（css-minimizer-webpack-plugin）也需要同步调整：

1. 修改css-loader配置：

{
  test: /(\.s[ac]ss)|(\.css)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        // 低版本css-loader添加该配置关闭Unicode转义
        unicode: false,
        // 如果是css-loader v6+版本，额外添加以下配置
        exportType: 'string'
      }
    },
    { loader: 'sass-loader', options: { sourceMap: !isProd } },
  ]
}

2. 生产环境如果开启了CSS压缩，修改css-minimizer-webpack-plugin配置：

// webpack配置的optimization节点下
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  // 其他配置
  optimization: {
    minimizer: [
      `...`, // 保留默认的js压缩器
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              // 关闭Unicode转义归一化
              normalizeUnicode: false
            }
          ]
        }
      })
    ]
  }
}

方案2：修改个别样式的写法 #

如果只需要调整少量样式，可以直接修改CSS/SCSS代码，避开自动转义：

• 普通CSS写法：将单斜杠改为双斜杠

content: "\\f2e9";

• SCSS写法：用插值语法包裹转义符

content: #{"\\f2e9"};

内容的提问来源于stack exchange，提问作者Yoskutik