In angular app i am trying to override my breadcrumb
by removing the divider. i use https://getbootstrap.com/docs/4.2/components/breadcrumb/#example
.
But not works. here is my 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:
@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. Order should be first bootstrap.css and then style.css
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/styles.scss",
],
you can use below css to override divider. This will not override bootstrap variable.
.breadcrumb>li+li:before {
padding: 0 5px;
color: #ccc;
content: "";
}
To Override bootstrap variable put "$breadcrumb-divider: none;" at the top of style.scss.
remove bootstrap.min.css
from angular.json.
.... "styles": [ "node_modules/font-awesome/css/font-awesome.min.css", "src/styles/styles.scss", ], ....
import bootstrap.scss
file.
@import "~bootstrap/scss/bootstrap";
set $breadcrumb-divider
before @import
statements.
$breadcrumb-divider: none; @import "~bootstrap/scss/bootstrap"; ...
Two Simple steps for the latest angular version
1). In angular.json file, add your custom stylesheet after bootstrap related stylesheet like I have added in my code snippet
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
2). At the end run again your application manually using ng serve
command
angular.json
"extractCss": true
to "extractCss": false
should fixes the issue
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.