如何在angular-cli创建的Angular 5项目中安装Bootstrap 4（SCSS）

嘿，我注意到你目标是集成Bootstrap 5，但目前安装的是Bootstrap 4.1.1，先把这个依赖调整过来，再一步步完成剩下的配置：

第一步：替换为Bootstrap 5依赖 #

先卸载当前的Bootstrap 4版本，再安装最新稳定版的Bootstrap 5：

npm uninstall bootstrap@4.1.1
npm install --save bootstrap@latest

第二步：配置Angular加载Bootstrap SCSS #

有两种方式可以引入Bootstrap的SCSS，根据你的需求选择：

方式1：全局自动引入（推荐） #

修改angular.json文件，找到projects -> sample-app -> architect -> build -> options下的styles数组，添加Bootstrap的SCSS入口路径：

"styles": [
  "src/styles.scss",
  "./node_modules/bootstrap/scss/bootstrap.scss"
]

这样项目编译时会自动全局加载Bootstrap的SCSS，所有组件都能直接使用Bootstrap的类、变量和混合宏。

方式2：按需在自定义SCSS中引入 #

如果你想更灵活地控制引入范围，可以在src/styles.scss（或者你的自定义SCSS文件）中手动引入Bootstrap，这也是实现自定义样式的核心步骤：

// 先定义你要覆盖的Bootstrap变量（比如主题色、字体、间距等）
$primary: #2c3e50; // 替换默认的蓝色主题
$secondary: #1abc9c;
$font-family-sans-serif: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$border-radius: 0.5rem;

// 然后引入Bootstrap的SCSS文件
@import "../node_modules/bootstrap/scss/bootstrap";

重点：一定要在引入Bootstrap之前定义变量，这样才能覆盖Bootstrap的默认值。

第三步：处理交互组件依赖（可选） #

Bootstrap 5的弹窗、下拉菜单等交互组件依赖Popper.js，虽然Bootstrap 5已经内置了精简版的Popper，但如果需要完整功能，可以安装官方的Popper库：

npm install --save @popperjs/core

Angular会自动识别这个依赖，无需额外配置。

第四步：验证配置是否生效 #

启动项目测试：

ng serve

在任意组件模板中添加Bootstrap组件，比如：

<button class="btn btn-primary">自定义主题按钮</button>
<div class="alert alert-secondary">测试提示框</div>

如果组件样式符合你自定义的变量值，说明配置成功了。

另外提一句：你之前用的ng set defaults.styleExt=scss在新版Angular CLI中已经被弃用了，不过你已经手动把CSS文件改成SCSS，这部分没问题，不用再调整。

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