如何从我的 Angular 项目中删除 Bootstrap?
How can I remove Bootstrap from my Angular project?
我正在尝试在我的 Angular 项目中使用 Material 设计 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"
},
Second : 从 angular.json
中删除 bootstrap url,如果你把它放在样式部分下,如下所示
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css" <--- REMOVE THIS
],
Third:检查并删除 styles.css
中显式导入的任何 bootstrap 引用或远程或本地的任何其他文件,如下所示
@import '~bootstrap/dist/css/bootstrap.min.css';
npm uninstall bootstrap --no-save
同时删除您在指向 bootstrap.min.css
的样式下的 angular.json 中添加的引用
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
如果您想了解 angular 和/或您是初学者 angular/front-end-development,请按照答案 1 进行操作,因为第一次手动操作对以后很有帮助,
如果你不是新手,想节省时间就直接贴吧
npm uninstall bootstrap --no-save
我的回答适用于所有 angular 开发人员
我正在尝试在我的 Angular 项目中使用 Material 设计 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"
},
Second : 从 angular.json
中删除 bootstrap url,如果你把它放在样式部分下,如下所示
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css" <--- REMOVE THIS
],
Third:检查并删除 styles.css
中显式导入的任何 bootstrap 引用或远程或本地的任何其他文件,如下所示
@import '~bootstrap/dist/css/bootstrap.min.css';
npm uninstall bootstrap --no-save
同时删除您在指向 bootstrap.min.css
的样式下的 angular.json 中添加的引用"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
如果您想了解 angular 和/或您是初学者 angular/front-end-development,请按照答案 1 进行操作,因为第一次手动操作对以后很有帮助,
如果你不是新手,想节省时间就直接贴吧 npm uninstall bootstrap --no-save
我的回答适用于所有 angular 开发人员