Laravel项目npm引入的Font Awesome编译后字体文件报404如何解决

问题原因 #

该404报错是Laravel Mix编译资源时，Font Awesome SCSS默认配置的字体相对路径，和编译后字体文件实际存放的公共路径不匹配导致的。

解决方案 #

按以下操作即可修复：

• 调整SCSS文件的引入逻辑，在导入Font Awesome样式前先覆盖字体路径变量

// 配置字体文件的公共访问路径
$fa-font-path: '/fonts/vendor/@fortawesome/fontawesome-pro/webfonts';

// Font Awesome 样式引入
@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
@import '~@fortawesome/fontawesome-pro/scss/brands';
@import '~@fortawesome/fontawesome-pro/scss/light';
@import '~@fortawesome/fontawesome-pro/scss/regular';
@import '~@fortawesome/fontawesome-pro/scss/solid';

如果你没有Font Awesome Pro的使用授权，把上面所有路径里的fontawesome-pro替换为fontawesome-free即可。

• 检查webpack.mix.js配置
  确认你的配置文件中没有关闭CSS URL处理规则，如果你之前手动加了mix.options({ processCssUrls: false })配置，要么删除该行让Mix自动处理资源路径，要么手动添加字体文件复制规则：

// 手动复制字体文件到公共目录
mix.copy('node_modules/@fortawesome/fontawesome-pro/webfonts', 'public/fonts/vendor/@fortawesome/fontawesome-pro/webfonts');

• 重新编译资源
  清理原有编译缓存后执行重新编译：
  npm run clean && npm run dev
  编译完成后检查public/fonts目录下是否生成了对应的字体文件，再刷新页面即可正常加载图标。

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