如何解决Angular 12中引入自定义字体出现的CSS模块报错

该报错核心原因是相对路径匹配错误：你写的./assets/路径是相对于app.component.css所在的src/app目录的，会被解析为src/app/assets/font/...，而Angular默认的静态资源目录assets存放在src根目录下，因此路径无法匹配。

• 方案1：修改CSS中字体的引用路径
  两种写法二选一即可：
  写法1：向上跳一级目录匹配根目录下的assets

  src: url("../assets/font/GraublauWebBold.woff") format("woff");
  

  写法2：直接用根路径匹配（适用项目没有配置额外baseHref的场景）

  src: url("/assets/font/GraublauWebBold.woff") format("woff");
  

• 方案2：将字体声明移到全局样式文件
  把@font-face代码从app.component.css移动到项目根目录的全局样式文件src/styles.css中，原有路径./assets/font/GraublauWebBold.woff可以直接生效，无需修改。
• 方案3：检查angular.json静态资源配置
  如果上述路径修改后仍报错，打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> assets配置项，确保数组中包含src/assets，确认assets目录会被打包到最终产物中：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

• 确认字体文件真实存在于src/assets/font/GraublauWebBold.woff路径，注意文件名、后缀的大小写要和代码中完全一致
• 配置修改后重启本地开发服务ng serve，清除缓存避免旧配置残留

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