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.
#angular