How to customise Bootstrap 4 SCSS variables using angular-cli & ng-bootstrap?

The accepted answer no longer works. If you are like me you are a new angular user trying to add bootstrap to your project and following the angular-cli wiki here: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap (as pasted in the accepted answer).

The problem is discussed here:https://github.com/twbs/bootstrap/issues/23112

Short version: The theme colors are now in a nested object so things like $brand-primary no longer apply - we must now change $theme-colors. It works, but we now have to replace the entire object even if we only want to edit one variable.

$gray-100: #f8f9fa;$gray-600: #868e96;$gray-800: #343a40;$red: #dc3545;$yellow: #ffc107;$green: #006600; // This is the only variable I wanted to change$cyan: #17a2b8;$theme-colors: (  primary: $green,  secondary: $gray-600,  success: $green,  info: $cyan,  warning: $yellow,  danger: $red,  light: $gray-100,  dark: $gray-800);

Angular CLI stories gives an answer at https://github.com/angular/angular-cli/wiki/stories-include-bootstrap which I will summarise below. Note that I am yet to find out how this interacts with ng-bootstrap.

Create a project:

ng new my-app --style=scsscd my-app

Install Bootstrap 4:

npm install bootstrap@next --save

Configuring Project

Create an empty file _variables.scss in src/ which is where your style modifications will go.

In styles.scss add the following:

@import 'variables';@import '../node_modules/bootstrap/scss/bootstrap';

Testing Project

Open app.component.html and add the following markup:

<button class="btn btn-primary">Test Button</button>

With the application configured, run ng serve to run your application in develop mode. In your browser navigate to the application localhost:4200.

Verify the bootstrap styled button appears. To ensure your variables are used open _variables.scss and add the following:

$brand-primary: red;

Return the browser to see the font colour changed.

It took me a while to work out so, in hope it helps someone, these are the steps I took to create my own custom style that overrides ng-bootstrap.

1. Create an Angular project using scss for the style (not .sass!)
2. Install ng-bootstrap using ng add as detailed in the installation section (not npm install).

This added a line in my styles.scss file like so:

/* Importing Bootstrap SCSS file. */@import '~bootstrap/scss/bootstrap';

3. From here, I could add properties above the @import which then meant I could change the theme as desired.

As for finding the variables to override, I first found them using a save from boostrap magic, but they could be found directly in node_modules\bootstrap\scss\_variables.scss

Example working styles.scss with override for the primary color:

/* You can add global styles to this file, and also import other style files */$primaryColor: hotpink;       $theme-colors: (primary: $primaryColor);/* Importing Bootstrap SCSS file. */@import '~bootstrap/scss/bootstrap';