Angular编译报错找不到font-awesome.css文件如何解决

问题原因 #

你当前的配置只在单元测试(test)环境的加载规则中引入了font-awesome样式，日常开发（ng serve）、生产构建（ng build）所使用的build配置块未添加对应样式引入，同时存在重复引入、路径匹配错误的问题。

解决方案 #

步骤1：补充angular.json的build配置 #

找到angular.json中projects.<你的项目名>.architect.build.options.styles配置项，添加font-awesome的样式路径，和你test块里的写法一致：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/styles/theme.scss",
  "src/styles/layout.scss",
  "src/styles/common.scss",
  "src/styles/material.scss",
  "src/styles/printfile.scss"
],

如果你需要在单元测试中也用到font-awesome，保留test块里的对应配置即可。

步骤2：删除样式文件中的重复引入 #

删掉你在.scss文件中添加的两行font-awesome相关配置：

// 以下两行全部删除
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "node_modules/font-awesome/css/font-awesome.css";

如果确实需要在scss中引入而非angular.json全局配置，需要修改路径为脚手架别名路径：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/css/font-awesome.css";

~是Angular脚手架默认支持的别名，直接指向node_modules目录，无需手动写层级相对路径。

步骤3：验证修复 #

执行以下命令清除缓存后重启服务：

ng cache clean
ng serve

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