必须通过angular.json的styles数组引入Bootstrap 5的SCSS源码，因仅此方式支持编译期变量重写（如$primary）和!default机制；引入bootstrap.min.css或在styles.scss中@import均导致变量失效、优先级失控。
必须通过 angular.json 的 styles 数组引入 Bootstrap 5 的源码 SCSS 文件（而非 .min.css），否则无法重写变量、覆盖默认样式；直接引入编译后 CSS 或用 @import 在 styles.scss 中加载，都会导致自定义变量失效或优先级失控。
为什么不能用 bootstrap.min.css 引入？
Bootstrap 5 的变量系统（$primary、$grid-breakpoints 等）只存在于 SCSS 源码中。bootstrap.min.css 是编译后的产物，所有变量早已被替换为固定值，你改了 $primary 也完全没用。更关键的是：SCSS 的 !default 机制只在编译期起作用——你必须在它被编译前，把自定义变量“塞”进加载链最前面。
-
node_modules/bootstrap/dist/css/bootstrap.min.css→ ❌ 只能用，不能改 -
node_modules/bootstrap/scss/bootstrap.scss→ ✅ 入口文件，但必须配合前置变量重写 - 直接在
src/styles.scss里@import "bootstrap/scss/bootstrap"→ ⚠️ 局部生效，且无法影响<html>或<body>上的全局类（如.bg-light在根节点的应用）
如何正确重写 $primary 和栅格断点？
核心是顺序：先定义变量，再导入 Bootstrap 源码，且整个流程必须走 angular.json 的 styles 链路，确保最终打包进全局 styles.css。推荐新建 src/custom-bootstrap.scss：
// src/custom-bootstrap.scss // 1. 覆盖默认变量（必须放在所有 @import 前） $primary: #2563eb; $grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1536px ); // 2. 导入 Bootstrap 所需模块（按需，避免全量） @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; @import "node_modules/bootstrap/scss/grid"; @import "node_modules/bootstrap/scss/utilities"; // 3. 可选：补全局工具类（如 .d-flex, .text-center） @import "node_modules/bootstrap/scss/helpers";
然后在 angular.json 的 styles 数组中，把它放在 src/styles.scss 之前：
立即学习“前端免费学习笔记（深入）”；
"styles": [ "src/custom-bootstrap.scss", "src/styles.scss" ]
- 顺序错位（比如
styles.scss在前）→ 你的$primary不会被读取，Bootstrap 用回默认值 - 用了
cnpm或pnpm→ 路径要写真实文件夹名，例如："node_modules/_bootstrap@5.3.3@bootstrap/scss/functions" - 改完不重启
ng serve→ 编译器根本不会重新处理 SCSS，变量修改永远不生效
重写后样式不生效？重点查这三处
90% 的“重写无效”问题不是代码错，而是构建或加载环节断了：
- 打开浏览器开发者工具 → Elements → 任一元素 → Computed → 查看
background-color对应的规则来源，如果显示来自bootstrap.min.css，说明你误引了编译后文件 - 检查终端是否报
Can't resolve 'node_modules/bootstrap/scss/functions'—— 路径错或未安装bootstrap（注意：只装bootstrap包即可，不需要bootstrap-scss独立包） - 运行
ng build --prod后检查输出目录dist/<project>/styles.css，搜索2563eb或你设的自定义色值，确认是否真被编译进去
真正难的不是写几行 SCSS，而是让 Angular 构建流程完整接纳你的变量重写意图——它要求路径精准、顺序严格、服务重启及时，三者缺一不可。任何一步跳过，你看到的都是“好像改了，其实没动”。
