Font Awesome 的 Webpack 版本在一台机器上添加了 \0 空字节，而在其他机器上则没有

Question

我们通过以下方式提供很棒的字体

\n

$fa-font-path: "#{$asset-path}/../../project/assets/fonts/fontawesome";\n\n@import "fontawesome/fontawesome";\n@import "fontawesome/brands";\n@import "fontawesome/solid";\n

\n

在我们的 Shopware 6 SCSS 文件中。

\n

我们注意到在某些机器上（我们正在服务器上构建），生成的 CSS 文件包含“\\0”空字节

\n

.fa-certificate:before {\n   content: "\xef\x8a\xb4\\0";\n}\n

\n

这会导致这样的输出：

\n

\n

Shopware 使用 webpack 从 SCSS 构建 CSS 文件。

\n

造成这种情况的原因是什么\\0？

\n

我们看到https://github.com/FortAwesome/Font-Awesome/issues/14660但添加了

\n

@charset "UTF-8";\n

\n

CSS 文件开头的内容没有帮助。

\n

当我们将构建的文件从一台机器复制到另一台机器时，它就可以工作了。所以这似乎不是服务器提供CSS的问题，而是在构建过程中的问题。

\n

编辑：深入挖掘：

\n

在 fontawesome SCSS 中有：

\n

$fa-var-certificate: \\f0a3;\n\n...\n\n.#{$fa-css-prefix}-certificate:before { content: fa-content($fa-var-certificate); }\n\n\n// Convenience function used to set content property\n@function fa-content($fa-var) {\n  @return unquote("\\"#{ $fa-var }\\"");\n}\n

\n

取消引用是sass_function- 我不知道来自\\0哪里

\n

EDIT2我们比较了两台机器上的文件vendor/shopware/storefront/Resources/app/storefront/package-lock.json，它们都是相同的 - 因此应该使用相同的节点包，只是节点版本略有不同（本地：v14.18.2，服务器：v14.18.1）。该问题仍然无法在本地重现。

\n

Answer 1

虽然不是理想的解决方案，但简单地替换\0已编译的 css 文件中的字符似乎就可以解决问题：

sed -i 's/\\0"/"/g' public/theme/c220db9f32a7e868b9b8009bdaa080d0/css/all.css

我发现当我sass直接使用二进制文件时它不会附加\0字符：

$ ./vendor/shopware/storefront/Resources/app/storefront/node_modules/.bin/sass custom/static-plugins/Theme/src/Resources/app/storefront/src/scss/_font-awesome.scss

但生成的代码看起来有点不同：

.fa-zhihu:before {
  content: "\f63f";
}

这似乎表明错误出现在 shopware 的 webpack 堆栈中的某个位置。