我正在尝试在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,
"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
中删除 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"
},
第二个:如果已将bootstrap网址放置在样式部分下,则从
angular.json
中删除该网址,如下所示"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css" <--- REMOVE THIS
],
第三:检查并删除在
styles.css
或任何其他远程或本地文件中明确导入的 bootstrap 引用,如下所示@import '~bootstrap/dist/css/bootstrap.min.css';
关于angular - 如何从Angular项目中删除Bootstrap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56145339/