如何从我的Angular项目中移除Bootstrap？

Question

我想在我的Angular项目中使用Material Design Bootstrap（MDB），但是当我使用angular bootstrap组件时，标准的bootstrap似乎干扰了样式。如何完全从我的Angular项目中删除Bootstrap，以便我的组件仅由Angular Bootstrap进行样式设计？请参考 。注：可编辑angular.json文件。

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],

package.json，

->

package.json，

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@types/chart.js": "^2.7.52",
    "angular-bootstrap-md": "^7.5.2",
    "atom": "^1.1.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.3.3",
    "terminal": "^0.1.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

- Ethernetz

---

你能为我上传 package.json 和 angular.json 的内容吗？ - Tony Ngo

是的，我已经添加了它们。 - Ethernetz

很奇怪，你能搜索所有文件看看是否有引用bootstrap的吗？ - Tony Ngo

@Ethernetz，你能否检查整个项目中是否有引用bootstrap.min.css或bootstrap.css？ - Nidhish Krishnan

Answer 1

首先：从你的package.json文件中移除bootstrap的依赖项，例如：

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.1",   <-------REMOVE THIS
    "core-js": "^2.5.4",
    "rxjs": "6.0.0",
    "zone.js": "^0.8.26"
  },

第二步：从 angular.json 中删除 Bootstrap 的 URL，如果你在 styles 部分像下面一样放置了它：

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css" <--- REMOVE THIS
],

第三步：检查并移除任何在styles.css或其他文件中明确导入的bootstrap引用，无论是远程还是本地导入，如下所示。

@import '~bootstrap/dist/css/bootstrap.min.css';

- Nidhish Krishnan

---

谢谢，我也在 styles.css 中导入了它。 - Ethernetz

Answer 2

npm uninstall bootstrap --no-save

同时还要删除你在angular.json中添加的指向bootstrap.min.css的样式引用。

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

- Shubham

---

除此之外，我也从package-lock.json中删除了bootstrap的条目。 - vigamage

Answer 3

对我来说，我有由 Visual Studio 生成的 Angular 项目。在删除所有引用 Bootstrap 后，我需要重新构建 Angular 项目 ng build，以便项目能够正常工作。如果有人需要的话，就把这个东西扔掉。

- Hoang Minh

Answer 4

如果你想了解 Angular 或者是一个 Angular / 前端开发的初学者，那么请遵循答案 1，因为第一次手动操作对未来非常有帮助。

如果你不是初学者且想节省时间，那么只需粘贴 npm uninstall bootstrap --no-save

我的答案适用于所有 Angular 开发人员。

- Asim Khan

---

这已经由被接受的答案和此处 https://dev59.com/JlMI5IYBdhLWcg3weLVS#56147263 给出。SO不是一个论坛，我们不讨论，每个答案都需要有用。 - Vega