9

我正在尝试在我的 Angular 项目中使用 Material Design Bootstrap (MDB)。但是，当我使用角度引导组件时，标准引导程序似乎会干扰样式。

在此处输入图像描述

从我的角度项目中完全删除引导程序的最佳方法是什么，以便我的组件仅由角度引导程序设置样式？

编辑

角.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"
            ],

包.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"
  },
4

3 回答 3

16

首先：从您的中删除引导程序依赖项package.json，如下所示：

"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"
  },

第二：从中删除引导 URL angular.json，如果您已将其放在样式部分下，如下所示

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

第三：检查并删除任何显式导入的引导引用styles.css或远程或本地的任何其他文件，如下所示

@import '~bootstrap/dist/css/bootstrap.min.css';
于 2019-05-15T09:04:22.543 回答
7

npm uninstall bootstrap --no-save

还删除您在 angular.json 中添加的引用，该引用在指向 bootstrap.min.css 的样式下

"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
 ],
于 2019-05-15T10:34:51.410 回答
0

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

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

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

于 2021-07-29T05:36:00.550 回答