如何从Angular项目中删除Bootstrap? [英] How can I remove Bootstrap from my Angular project?

问题描述

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

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

修改

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 ，

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

解决方案

首先:从您的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"
  },

第二:如果您已将引导网址放在angular.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"
  },

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

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

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

I am attempting to use Material Design Bootstrap (MDB) in my Angular project. However, when I use an angular bootstrap component, it seems standard bootstrap interferes with the styling.

Whats the best way to fully remove bootstrap from my angular project so my components are only styled by angular bootstrap?

Edit

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,

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

解决方案

First : Remove bootstrap dependency From your package.jsonas shown below for example:

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

Second : Remove the bootstrap url from angular.json, if you have placed it under styles section like as shown below

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

Third : Check and Remove any bootstrap references explicitly imported in styles.css or any other files remotely or locally like as shown below

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

这篇关于如何从Angular项目中删除Bootstrap?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！