Font Awesome 的 Webpack 构建在一台机器上添加了 \0 空字节，而不是在其他机器上

Question

我们正在包括字体真棒通过

$fa-font-path: "#{$asset-path}/../../project/assets/fonts/fontawesome";

@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/solid";

在我们的 Shopware 6 SCSS 文件中。

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

.fa-certificate:before {
   content: "\0";
}

导致这样的输出：

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

这个附加的\0 可能是什么原因？

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

@charset "UTF-8";

CSS 文件的开头没有帮助。

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

编辑：深入挖掘：

在 fontawesome SCSS 中有：

$fa-var-certificate: \f0a3;

...

.#{$fa-css-prefix}-certificate:before { content: fa-content($fa-var-certificate); }


// Convenience function used to set content property
@function fa-content($fa-var) {
  @return unquote("\"#{ $fa-var }\"");
}

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

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

Answer 1

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

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 堆栈中。