Angular项目中Bootstrap 5 font-family变量覆盖不生效问题

解决方案 #

1. 调整Sass变量导入顺序 #

Bootstrap的所有Sass变量都带有!default标记，仅当你在导入Bootstrap核心样式之前声明自定义变量，覆盖逻辑才会生效，正确的引入结构如下：

// 先声明自定义覆盖变量
$variable-prefix: bs-;
$font-family-sans-serif: 'Proxima Nova', sans-serif;
$font-family-base: var(--#{$variable-prefix}font-sans-serif);

// 再导入Bootstrap的Sass核心文件
@import "bootstrap/scss/bootstrap";

如果你的自定义变量单独存放在变量文件中，也要确保该变量文件的导入顺序排在Bootstrap之前。

2. 修正字体家族名称匹配 #

你从Google Fonts引入的Proxima Nova字体，官方规定的font-family名称为'Proxima Nova'，你之前配置的'proxima-nova'名称不匹配，即便变量覆盖成功也无法正确加载字体，需修正名称。

3. 确认Angular全局样式加载顺序 #

打开项目根目录的angular.json配置文件，找到build -> options -> styles数组，确保你的自定义Sass变量文件/全局样式文件的排序在Bootstrap样式文件之前，避免后加载的Bootstrap默认样式覆盖你的配置。

4. 可选快速生效方案 #

如果不想调整Sass导入逻辑，可以直接在全局style.css的最开头添加如下代码，直接覆盖Bootstrap注入的CSS根变量，优先级更高会直接生效：

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
:root {
  --bs-font-sans-serif: 'Proxima Nova', sans-serif;
}

修改完成后如果仍未生效，可执行ng serve --force重启开发服务，清理缓存避免增量编译导致的变量未更新问题。

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