Angular14配置Material自定义字体报缺少分号错误如何解决

Missed semicolon You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

当前维护Angular 14项目，需要将项目全局默认字体替换为公司指定的专属字体。由于项目使用Angular Material组件及配套样式体系，除了在body元素上声明默认字体外，还需要让所有Material组件同步继承使用该字体，配置过程参考Angular Material官方排版指南。

当在排版配置中指定格式为'OurFont:sans'的自定义字体时，项目编译阶段就会抛出上述错误；该字体名是公司CDN分发的CSS文件中定义的正式字体名称，若移除配置值中的:sans后缀，仅保留'ourFont'作为字体名，项目即可正常编译通过。

触发报错的配置片段（来自_light.scss文件） #

$ourFont-sans-typography: mat.define-typography-config(
  $font-family: 'OurFont:sans',
);

可正常编译的配置片段 #

$ourFont-sans-typography: mat.define-typography-config(
  $font-family: 'ourFont',
);

这个报错的核心触发点有两个：

1. Angular Material的mat.define-typography-config方法在处理$font-family入参时，会对传入的字符串做拆分解析，默认将冒号识别为字体配置的分隔标记（类似字体权重、字体族分类的分隔符），不会把冒号当做字体名称本身的组成部分，导致解析时字符串被意外截断。
2. Angular构建链中的PostCSS默认使用标准CSS解析器处理编译中间产物，被截断的代码不符合CSS语法规则，就会抛出「缺少分号、请使用postcss-scss解析器」的错误。
   *注：字体名本身包含冒号是完全符合CSS规范的，不属于字体定义本身的问题。

按优先级从高到低可选以下方案：

• 无侵入代码修复：给带冒号的字体名额外嵌套一层单引号，显式告诉解析器这是完整的字符串值，不会对内部的冒号做语法解析，修改后代码如下：

$ourFont-sans-typography: mat.define-typography-config(
  $font-family: "'OurFont:sans'",
);

该写法最终编译输出的CSS会保留完整的带冒号字体名，浏览器可正常识别加载，不需要调整任何构建配置。

• 兼容写法：如果当前项目的SCSS版本对嵌套引号解析有异常，可以用SCSS插值语法显式标记完整字体值：

$company-font: 'OurFont:sans';
$ourFont-sans-typography: mat.define-typography-config(
  $font-family: #{$company-font},
);

• 构建配置调整：如果以上两种代码写法都不生效，可以修改项目的PostCSS配置，将.scss文件的默认解析器替换为postcss-scss，该方案需要调整构建配置，排查成本更高，不作为首选。

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