Webpack编译SASS时FontAwesome图标偶发损坏，如何禁止其处理Unicode转义？

问题原因 #

偶发图标损坏的核心诱因是Webpack编译流程将SASS中定义的FontAwesome Unicode转义序列（例如\f007）转换成了实际的Unicode特殊字符，这类字符不属于GBK等窄编码的覆盖范围，出现以下任意一种情况时就会出现乱码：

• 服务器返回的CSS文件响应头未明确指定charset=utf-8，浏览器默认编码无法识别特殊字符
• 网络传输链路中的代理、CDN节点对CSS内容做了非UTF-8转码，破坏了特殊字符的字节结构
• 弱网环境下CSS文件传输出现部分字节损坏，恰好命中Unicode字符的编码段

该问题的偶发性完全匹配网络链路、节点策略的波动特征，和你观察到的“未修改文件也会触发、和网络状态相关”的现象一致。

配置Webpack保留Unicode转义序列 #

可以通过以下配置让Webpack不转换Unicode转义序列，保留原生\xxxx的写法，从根源避免编码解析问题：

方案1（适配Webpack 5及以上版本） #

修改Webpack顶层output配置，关闭全局Unicode字面量转换：

module.exports = {
  // 其他原有配置
  output: {
    // 其他原有output配置
    unicode: false
  }
}

方案2（适配Webpack 4及以下版本） #

修改sass-loader配置，开启SASS自带的Unicode转义输出能力：

{
  test: /\.sass$/,
  exclude: /node_modules/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        url: false,
      }
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            ["postcss-preset-env",],
          ],
        },
      },
    },
    // 修改sass-loader配置
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          unicodeEscape: true
        }
      }
    }
  ],
}

额外优化建议 #

在Google Cloud App Engine的app.yaml配置中，为CSS静态资源显式指定UTF-8编码响应头，彻底规避传输、解析阶段的编码异常：

handlers:
  - url: /(.*\.css)$
    static_files: static/\1
    upload: static/.*\.css$
    http_headers:
      Content-Type: "text/css; charset=utf-8"

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