SCSS Webfont (Font Awesome) 使用 Webpack 编译损坏 [英] SCSS Webfont (Font Awesome) Compilation Corruption Using Webpack

问题描述

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

When compiling font content declarations in SCSS, the output is getting corrupted. Instead of outputting the character escape sequence as I would expect e.g., content: \f26e;, the sass-loader is outputting a single undisplayable character, represented as a square e.g., content: ""; The characters can be found both in the js bundle as well as the extracted CSS.

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

You can see clearly in the CSS that comes down with the Font Awesome node package of how it should be written to the file

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

它如何写入我的文件

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

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

I was attempting to build styles off of Font Awesome styles when I discovered the issue. I decided to just try to recompile Font Awesome but the issue persisted there too. I have searched around and haven't found any resources that indicate that I'm doing it wrong, but that's my assumption and not that there is something wrong with the Webpack sass-loader.

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

I have created a repo that demonstrates the issue: https://github.com/rlvandaveer/sass-loader-fontawesome-gist

推荐答案

深入研究这个问题我已经确定这实际上不是问题.以上两种情况是等价的.第一个是 ASCII 转义码，第二个是相应的文字 unicode 字符(未正确呈现).示例 repo 使用 dart sass 实现，它的运行方式与我习惯的 node-sass 实现不同.这个 dart-sass 问题证实了两种实现之间的差异.

Digging into this more I've determined that this is not actually an issue. The two cases above are equivalent. The first is an ASCII escape code and the second is the corresponding literal unicode character (which isn't rendered properly). The example repo uses the dart sass implementation which operates differently than the node-sass implementation which I was accustomed to. This dart-sass issue confirms the difference between the two implementations.

希望这个答案能让某人免于类似 n00by 的困惑.

Hopefully this answer will save someone from similar n00by confusion.

这篇关于SCSS Webfont (Font Awesome) 使用 Webpack 编译损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！