同时使用Angular Material与Bootstrap CSS样式失效问题咨询

完全可以，但你现在遇到的样式异常，本质是Bootstrap的全局样式和Angular Material的默认样式发生了冲突——尤其是你把Bootstrap放在theme.scss之后，它的全局规则会覆盖Material的部分默认样式。

下面给你几个可行的解决思路，帮你实现分功能使用两个框架：

1. 给Bootstrap加容器隔离 #

不要全局让Bootstrap的样式生效，而是给它套一个专属父类，只让指定区域的元素受Bootstrap影响：

• 新建一个bootstrap-wrapper.scss文件，内容写：

  .bootstrap-only {
    @import "~bootstrap/dist/css/bootstrap.min.css";
  }
  

• 把angular.json里的Bootstrap路径换成这个文件：

  "styles": [
    "src/theme.scss",
    "src/bootstrap-wrapper.scss",
    "src/styles.css"
  ],
  

• 之后所有需要用Bootstrap的功能模块，都放在带bootstrap-only类的容器里，比如：

  <div class="bootstrap-only">
    <!-- 这里用Bootstrap的组件和样式 -->
    <div class="row">...</div>
  </div>
  

  这样Bootstrap的样式就不会污染Angular Material的组件了。

2. 只导入Bootstrap需要的部分 #

如果你只用Bootstrap的某几个功能（比如网格、表单），没必要全量导入，只挑需要的模块引入：

• 确保已经装了bootstrap和sass依赖，然后新建一个custom-bootstrap.scss：

  // 先导入Bootstrap的基础工具类
  @import "~bootstrap/scss/functions";
  @import "~bootstrap/scss/variables";
  @import "~bootstrap/scss/mixins";
  // 只导入你需要的模块，比如网格系统
  @import "~bootstrap/scss/grid";
  // 还可以加表单、按钮等模块
  // @import "~bootstrap/scss/forms";
  

• 把这个文件加入angular.json的styles数组，这样加载的样式少，冲突也会更少。

3. 调整加载顺序+手动修复冲突 #

如果必须全局引入Bootstrap，可以调整样式加载顺序，让Material的主题样式优先级更高：

• 修改angular.json的styles顺序：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/theme.scss",
    "src/styles.css"
  ],
  

• 然后在styles.css里手动覆盖冲突的样式，比如Bootstrap会给body加默认margin，你可以改回来：

  body {
    margin: 0;
    padding: 0;
  }
  

  这种方式需要你自己排查冲突点，适合冲突不多的场景。

总之，只要做好样式隔离或者冲突修复，完全可以在项目里分功能用这两个框架——比如用Material做后台管理的组件，用Bootstrap做前端展示页面，两边互不干扰。

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