Angular编译报错：mini-css-extract-plugin无法解析font-awesome字体路径

问题原因 #

编译报错的核心是font-awesome的SCSS文件中默认声明的字体相对路径，在Angular CLI的webpack编译规则下解析错误，多嵌套了一层node_modules/font-awesome/目录，导致找不到对应的字体文件。

解决方案 #

按优先级选择以下方案即可：

• 方案1：修改SCSS导入配置（最推荐，保留SCSS自定义能力）
  打开styles.scss，在导入font-awesome的代码前新增字体路径变量声明，同时将相对路径导入改为Angular CLI支持的别名导入：

  // 在@import '../node_modules/font-awesome/scss/font-awesome';之前添加这行
  $fa-font-path: '~font-awesome/fonts';
  // 把原来的导入行替换为下面的写法
  @import '~font-awesome/scss/font-awesome';
  

  其中~是Angular CLI预置的别名，直接指向项目根目录的node_modules文件夹，避免相对路径解析错误。

• 方案2：直接引入预编译CSS（无自定义需求时最优）
  不需要在styles.scss里导入font-awesome的SCSS文件，直接修改项目根目录的angular.json配置，在build -> options -> styles数组中添加预编译的CSS资源路径：

  "styles": [
    "src/styles.scss",
    "node_modules/font-awesome/css/font-awesome.min.css"
  ]
  

  该方案直接使用官方预编译好的CSS文件，不会出现路径解析问题。

• 方案3：补装依赖（如果缺失的话）
  如果执行上述操作后仍报错，检查package.json中是否存在font-awesome依赖，缺失的话执行安装命令：

  npm install font-awesome --save
  

修改完成后删除项目下的.angular/cache（旧版本Angular删除node_modules/.cache）目录，重新执行编译命令即可恢复正常。

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