如何配置最新版Angular(v15)与Bootstrap(v5)并使用.scss文件

1. 创建支持SCSS的Angular项目（或转换现有项目） #

• 新建项目时直接指定SCSS为样式格式：

  ng new my-angular-bootstrap-app --style=scss
  

• 若已有Angular项目，需将默认样式格式改为SCSS：
  1. 修改angular.json中projects -> [你的项目名] -> schematics -> @schematics/angular:component -> style为scss
  2. 将项目中所有.css样式文件重命名为.scss，并更新对应组件ts文件中styleUrls的路径
  3. 修改angular.json里build -> options -> styles数组中默认样式文件的扩展名（如src/styles.css改为src/styles.scss）

2. 安装Bootstrap 5及依赖 #

Bootstrap 5依赖Popper.js实现弹窗、下拉菜单等交互组件，执行以下命令安装：

npm install bootstrap @popperjs/core --save

（若使用Yarn，替换为yarn add bootstrap @popperjs/core）

3. 配置项目引入Bootstrap资源 #

方式一：通过angular.json全局引入（快速配置） #

打开angular.json，找到build -> options下的styles和scripts数组，添加对应资源路径：

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

此方式会全局引入Bootstrap的所有样式和脚本，无需在组件中单独导入。

方式二：通过styles.scss导入SCSS（支持自定义主题） #

这种方式更灵活，允许你覆盖Bootstrap的SCSS变量定制主题：

1. 打开src/styles.scss，先添加自定义变量（需在导入Bootstrap前声明），例如：

   // 自定义Bootstrap主题变量
   $primary: #2563eb;
   $secondary: #64748b;
   

2. 导入Bootstrap的SCSS文件：

   @import "../node_modules/bootstrap/scss/bootstrap";
   

3. 若需使用Bootstrap的JS组件，仍需在angular.json的scripts数组中添加Popper和Bootstrap的JS文件（同方式一的scripts配置）

4. 验证配置生效 #

在任意组件模板中添加Bootstrap样式的元素，例如在app.component.html中：

<div class="container mt-5">
  <h1>Bootstrap + Angular Test</h1>
  <button class="btn btn-primary">Primary Button</button>
  <div class="alert alert-success mt-3">This is a Bootstrap alert!</div>
</div>

启动项目：

ng serve --open

打开浏览器后若看到带有Bootstrap样式的组件，说明配置成功。

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