7

我们包括字体真棒通过

$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）。问题仍然无法在本地重现。

4

1 回答 1

2

虽然不是一个理想的解决方案，但简单地替换已\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 堆栈中。

于 2021-12-16T14:33:15.613 回答