SCSS Webfont (Font Awesome) 使用 Webpack 编译损坏

Posted 2023-02-19

【中文标题】SCSS Webfont (Font Awesome) 使用 Webpack 编译损坏

【英文标题】：SCSS Webfont (Font Awesome) Compilation Corruption Using Webpack

【发布时间】：2020-06-01 14:52:04

【问题描述】：

在 SCSS 中编译字体内容声明时，输出会损坏。 sass-loader 没有像我期望的那样输出字符转义序列，例如content: \f26e;，而是输出一个无法显示的字符，表示为正方形，例如，content: ""; 这些字符既可以在 js 包中找到，也可以在提取的 CSS。

您可以在 Font Awesome 节点包附带的 CSS 中清楚地看到它应该如何写入文件

.fa-500px:before 
  content: "\f26e"; 

它是如何写入我的文件的

.fa-500px:before 
  content: "";

当我发现这个问题时，我正试图从 Font Awesome 样式中构建样式。我决定尝试重新编译 Font Awesome，但问题仍然存在。我四处搜索并没有找到任何表明我做错了的资源，但这是我的假设，而不是 Webpack sass-loader 有问题。

我创建了一个演示该问题的存储库：https://github.com/rlvandaveer/sass-loader-fontawesome-gist

【参考方案1】：

深入研究这一点，我确定这实际上不是问题。上述两种情况是等价的。第一个是 ASCII 转义码，第二个是相应的文字 unicode 字符（未正确呈现）。示例 repo 使用 dart sass 实现，它的运行方式与我习惯的 node-sass 实现不同。 This dart-sass issue 确认了两种实现之间的区别。

希望这个答案可以使某人免于类似的困惑。