Customizing bootstrap variables with ng-bootstrap

I have inherited a project that uses Angular 7 & ng-bootstrap ^4.2.1. I'd like to customize bootstrap variables (stuff like $primary etc).

I'm perfectly aware that IF I am including bootstrap.scss I have to add my customizations before the @import '~bootstrap/bootstrap';`

Point is when using ng-bootstrap I do not @import bootstrap at all! The ng-bootstrap library seem to do so on its own... which means I cannot put these variables anywhere.

What I have tried


Looking at the angular.json file I noticed that some files are listed and I tried to add a new one containing my variables, however it does not matter whether I add it as first or last element nothing changes:

# angular.json
# ... a bunch of stuff
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/SomePath",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
<b>"src/bootstrap-vars.scss", &lt;&lt;&lt; added this file overriding bootstrap variables</b>
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"src/styles.scss",
<b>"src/bootstrap-vars.scss", &lt;&lt;&lt; nothing seems to change placing it here</b>
],


For some reason SO wont let me use proper pre tags to properly bold lines...

Placing the variables inside the src/styles.scss file, as expected, does not produce any change.

My question is: how am I supposed to override the bootstrap variables when using bootstrap via ng-bootstrap?

I guess I should be doing something when defining the modules, for example I have this SharedModule:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {RouterModule} from '@angular/router';
import { AgmCoreModule } from '@agm/core';
import {environment} from '../../environments/environment';
import {AgmAutocompleteComponent} from './features/agm-autocomplete.component';
import {FormsModule} from '@angular/forms';
import {HelperService} from './services/helper.service';
import {NgbDateParserFormatter, NgbDatepickerModule} from '@ng-bootstrap/ng-bootstrap';
import {MomentDateFormatter} from '../core/formatters/moment-date.formatter';
import {DatePickerComponent} from './features/date-picker.component';
import {UnexpectedErrorComponent} from "./features/unexpected-error.component"
import { SpinnerComponent } from './features/spinner.component';
import {WaitingComponent} from "./features/waiting.component"

@NgModule({
declarations: [
AgmAutocompleteComponent,
DatePickerComponent,
UnexpectedErrorComponent,
SpinnerComponent,
WaitingComponent,
],
imports: [
CommonModule,
HttpClientModule,
RouterModule,
FormsModule,
AgmCoreModule.forRoot({
apiKey: environment.maps_api_key,
libraries: ['places'],
}),
NgbDatepickerModule
],
exports: [
AgmAutocompleteComponent,
StripeComponent,
DatePickerComponent,
UnexpectedErrorComponent,
SpinnerComponent,
WaitingComponent,
],
providers: [
HelperService,
{
provide: NgbDateParserFormatter,
useClass: MomentDateFormatter
},
]
})
export class SharedModule {
}


Maybe I should include something before the importing NgbDateParserFormatter/NgbDatepickerModule? But what/how?

Continue reading...