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?