[英]Not able to override Bootstrap in Angular 7 app
In angular app i am trying to override my breadcrumb
by removing the divider.在 angular 应用程序中,我试图通过移除分隔线来覆盖我的
breadcrumb
。 i use https://getbootstrap.com/docs/4.2/components/breadcrumb/#example
.我使用
https://getbootstrap.com/docs/4.2/components/breadcrumb/#example
。
But not works.但不起作用。 here is my angular.json
这是我的 angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ibo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ibo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap",
"src/styles"
]
},
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/styles.scss",
],
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ibo:build"
},
"configurations": {
"production": {
"browserTarget": "ibo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ibo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ibo-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ibo:serve"
},
"configurations": {
"production": {
"devServerTarget": "ibo:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ibo"
}
my style.scss:我的style.scss:
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints.scss';
@import 'global.scss';
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm: 768px,
md: 768px,
lg: 1024px
);
//resets;-
html,body{
padding: 0;
margin: 0;
height: 100%;
}
.wrapper.container-fluid{
min-height: 100%;
padding:0;
margin: 0;
}
$breadcrumb-divider: none !important;
any one help me?有人帮我吗? thanks in advance.
提前致谢。
Instead of importing or using CDN for bootstrap styles, load bootstrap.css using angular.json as below.使用 angular.json 加载 bootstrap.css,而不是为引导样式导入或使用 CDN,如下所示。 Order should be first bootstrap.css and then style.css
顺序应该是首先 bootstrap.css 然后是 style.css
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/styles.scss",
],
you can use below css to override divider.您可以使用下面的 css 来覆盖分隔线。 This will not override bootstrap variable.
这不会覆盖引导程序变量。
.breadcrumb>li+li:before {
padding: 0 5px;
color: #ccc;
content: "";
}
To Override bootstrap variable put "$breadcrumb-divider: none;"要覆盖引导程序变量 put "$breadcrumb-divider: none;" at the top of style.scss.
在 style.scss 的顶部。
remove bootstrap.min.css
from angular.json.从 angular.json 中删除
bootstrap.min.css
。
.... "styles": [ "node_modules/font-awesome/css/font-awesome.min.css", "src/styles/styles.scss", ], ....
import bootstrap.scss
file.导入
bootstrap.scss
文件。
@import "~bootstrap/scss/bootstrap";
set $breadcrumb-divider
before @import
statements.在
@import
语句之前设置$breadcrumb-divider
。
$breadcrumb-divider: none; @import "~bootstrap/scss/bootstrap"; ...
Two Simple steps for the latest angular version最新 Angular 版本的两个简单步骤
1). 1)。 In angular.json file, add your custom stylesheet after bootstrap related stylesheet like I have added in my code snippet
在 angular.json 文件中,在引导程序相关的样式表之后添加您的自定义样式表,就像我在代码片段中添加的那样
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
2). 2)。 At the end run again your application manually using
ng serve
command最后,使用
ng serve
命令再次手动运行您的应用程序
angular.json
angular.json
"extractCss": true
to "extractCss": false
should fixes the issue"extractCss": true
更改为"extractCss": false
应该可以解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.