如何在Angular 14项目中加载自定义SCSS定制Bootstrap组件？

1. 确认Bootstrap Sass依赖安装 #

ng-bootstrap仅提供组件逻辑，不包含Bootstrap样式，需单独安装Bootstrap的Sass包：

npm install bootstrap@5 --save

（Angular 14适配ng-bootstrap v12+/Bootstrap 5，版本对应需匹配）

2. 创建自定义变量文件 #

在项目src目录下新建_variables.scss文件，写入要覆盖的Bootstrap变量（变量名需与Bootstrap官方定义完全一致）：

// 覆盖主色调
$primary: #2c3e50;
// 覆盖按钮圆角
$btn-border-radius: 0.5rem;
// 覆盖表单输入框边框颜色
$input-border-color: #95a5a6;

3. 配置全局样式文件 #

将原styles.css重命名为styles.scss后，按以下顺序导入文件（自定义变量必须在Bootstrap之前导入）：

// 导入自定义变量
@import './variables';
// 导入Bootstrap Sass核心
@import 'bootstrap/scss/bootstrap';
// 可添加你的全局自定义样式

4. 修正angular.json配置 #

找到angular.json中projects -> [你的项目名称] -> architect -> build -> options -> styles节点，确保数组内包含你的全局样式文件路径，正确格式如下：

"styles": [
  "src/styles.scss"
]

注意：不要在其他无关节点（如serve的options）下重复添加styles属性，否则会触发Schema校验错误。

5. 验证生效 #

重启开发服务器：

ng serve

检查目标组件（如按钮、表单）的样式是否已按自定义变量更新。

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