如何在Angular组件中避免引入的Bootstrap全局样式被样式封装

可行解决方案 #

1. 仅引入Bootstrap工具层，不引入完整样式

你当前问题的核心原因是在组件样式中@use了完整Bootstrap，Bootstrap自带的全局类样式规则会被Angular的样式封装自动加上组件专属属性前缀，导致优先级低于全局Bootstrap样式，才需要用!important覆盖。
你只需要调整公用Bootstrap配置文件，只导出需要的变量、mixin、函数，不输出任何实际样式规则即可：

// /style/bootstrap.scss 仅导出工具，无实际样式输出
@forward '~bootstrap/scss/functions';
@forward '~bootstrap/scss/variables';
@forward '~bootstrap/scss/mixins';
// 移除原来对完整bootstrap的forward，避免引入全局类样式

组件内的使用方式无需修改，@use 'bootstrap' as bootstrap调用mixin、变量的逻辑完全正常，不会生成多余的全局类样式，自然不会出现被加前缀的问题。

2. 全局引入Bootstrap完整样式

把完整的Bootstrap样式放到angular.json的projects.[你的项目名].architect.build.options.styles数组中全局引入，全局引入的样式不会被Angular加组件属性前缀，所有组件内使用Bootstrap类都会匹配全局样式，不存在优先级问题。

3. 局部修改Bootstrap类用:host ::ng-deep控制作用域

如果你需要在组件内单独修改某个Bootstrap类的样式，不想污染全局也不用!important，可以用Angular提供的伪类组合限制作用域：

// 仅对当前组件内的.btn类生效，不会溢出到全局
:host ::ng-deep .btn {
  border-radius: bootstrap.$border-radius-lg;
}

内容的提问来源于stack exchange，提问作者Paul K.