SCSS Webfont (Font Awesome) 使用 Webpack 编译损坏
SCSS Webfont (Font Awesome) Compilation Corruption Using Webpack
在 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
深入研究后我确定这实际上不是问题。以上两种情况是等价的。第一个是 ASCII 转义码,第二个是相应的文字 unicode 字符(未正确呈现)。示例 repo 使用 dart sass 实现,它的运行方式与我习惯的 node-sass 实现不同。 This dart-sass issue 证实了两种实现之间的差异。
希望这个答案能让某人免于类似的 n00by 困惑。
在 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
深入研究后我确定这实际上不是问题。以上两种情况是等价的。第一个是 ASCII 转义码,第二个是相应的文字 unicode 字符(未正确呈现)。示例 repo 使用 dart sass 实现,它的运行方式与我习惯的 node-sass 实现不同。 This dart-sass issue 证实了两种实现之间的差异。
希望这个答案能让某人免于类似的 n00by 困惑。