Shopware 6自定义主题引入Font Awesome报错与字体加载问题

修复SCSS引入报错问题 #

你遇到的~@fortawesome文件找不到报错，核心原因是Shopware的主题SCSS编译器基于PHP实现，不支持webpack生态的~前缀解析node_modules模块，直接引入包根目录也会因为缺少入口文件声明解析失败。
正确引入步骤：

1. 确认依赖安装位置：在插件的src/Resources/app/storefront目录下执行yarn add @fortawesome/fontawesome-free，保证依赖存放在该目录的node_modules文件夹内。
2. 修改base.scss文件，优先声明Font Awesome字体路径变量，再引入具体的样式文件，不需要写多层相对路径，直接用@包名的官方解析规则即可：

// 注意替换下面路径里的yourpluginname为你插件的实际小写名称
$fa-font-path: "/bundles/yourpluginname/assets/fonts/fontawesome";

// 引入Font Awesome核心样式和需要的图标集
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/brands";

之前用../../node_modules/@fortawesome/...相对路径的写法兼容性很差，生产环境编译、多节点部署时很容易出现路径解析错误，不推荐使用。

实现编译时自动复制webfonts文件 #

不需要手动复制字体到public目录，通过Shopware自带的构建资源配置规则，就可以让系统在主题编译、资源发布阶段自动拷贝字体文件：

1. 在插件目录下新建配置文件，路径为src/Resources/config/storefront/build.yml
2. 在文件中添加静态资源拷贝规则：

assets:
  - from: "@fortawesome/fontawesome-free/webfonts"
    to: "assets/fonts/fontawesome"

3. 执行以下命令重新发布资源、编译主题即可生效：

bin/console plugin:refresh
bin/console assets:install
bin/console theme:compile
# 开发环境调试可以直接执行前端构建脚本
./bin/build-storefront.sh

配置完成后，Font Awesome的字体文件会自动被复制到public目录下对应插件的资源路径，和scss中声明的$fa-font-path完全匹配，不会出现字体加载404的问题。

内容的提问来源于stack exchange，提问作者NixH