局部引入Bootstrap CSS失效的根本原因是Angular构建系统仅识别angular.json中build.options.styles数组声明的样式文件；@import无法进入样式注入链，且Bootstrap SCSS依赖全局变量和前置模块，单独导入易报错或漏样式。
局部引入 Bootstrap CSS 会失效，根本原因在构建机制
Angular 的构建系统（ng build）只认 angular.json 中 build.options.styles 数组里声明的样式文件。你不能像在普通 HTML 或 Webpack 项目里那样，在某个 .component.scss 里写 @import "node_modules/bootstrap/scss/buttons" 就让按钮样式只作用于该组件——它会被 SCSS 编译器处理，但最终不会进入 Angular 的样式注入链，也不会被 ViewEncapsulation 机制识别为“当前组件的样式”。更关键的是，Bootstrap 的 SCSS 文件大量依赖 $enable-rounded 等全局变量和 bootstrap/scss/functions 等前置模块，单独导入极易报错或漏样式。
想局部用 Bootstrap 样式？必须走 @use + _base.scss 模式
真正可行的“局部”路径是：把 Bootstrap 的核心变量、mixin 和基础工具类提前提取到一个项目级的 _base.scss，再由需要的组件按需 @use。这不是“引入 Bootstrap CSS”，而是复用它的设计契约。
-
@use "src/styles/_base" as base—— 在组件 SCSS 顶部导入，确保变量/mixin 可用 - 用
base.button-variant()这类 mixin 手动构造按钮样式，而非直接套.btn.btn-primary - 避免
@import整个bootstrap/scss目录：它会拉入所有组件样式（含dropdown、modal），破坏隔离性 - 若组件只需一个带圆角的 badge，就只
@use "bootstrap/scss/mixins/border-radius"（需确认该 mixin 不依赖其他 bootstrap 内部模块）
为什么 ViewEncapsulation.Emulated 挡不住全局 Bootstrap 类
你在模板里写 <button class="btn btn-primary"></button>，即使组件启用了默认的 ViewEncapsulation.Emulated，样式依然生效——因为 .btn 是全局 CSS 类，匹配不依赖属性选择器。Angular 的封装只影响你写在 styles 或 styleUrls 里的规则如何编译，不影响 HTML 中已存在的 class 名对全局样式的引用。所以：
- 全局引入
bootstrap.min.css后，所有组件都能用.btn，这是预期行为 - 这不等于“样式泄漏”，而是 CSS 天然的层叠机制；真正要防的是你自己写的
.card-title { color: red; }意外污染其他.card-title - 若需彻底隔绝，只能放弃 class-based 复用，改用 BEM 命名（如
app-card__title）+@use构建逻辑
真正隔离的替代方案：用 @ng-bootstrap/ng-bootstrap 替代 CSS 类
如果你的目标是“某个组件内安全使用下拉菜单，且不担心全局 .dropdown 规则干扰”，那正确做法不是局部引 CSS，而是用 Angular 原生组件库：
立即学习“前端免费学习笔记（深入）”；
- 安装
@ng-bootstrap/ng-bootstrap后，在组件imports中加入NgbDropdownModule - 模板中用
<div ngbdropdown>，它内部不依赖 <code>.dropdown类，而是用指令 + 动态插入 DOM 实现 - 样式由库自己通过
ViewEncapsulation.Emulated封装，与你的组件样式完全解耦 - 注意：CSS 仍需全局引入（
bootstrap.min.css），但仅用于基础排版（.container、.row），功能组件样式由库控制
最易被忽略的一点：所谓“局部引入 Bootstrap CSS”，本质上是个伪需求。Angular 的样式模型不支持运行时按组件粒度加载 CSS 文件，所有“局部”效果都得靠 SCSS 编译时控制或组件级封装实现。硬要塞 CSS 文件进组件，只会让构建失败或样式不可预测。
