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

Question

I'm using angular-cli to build an Angular 4 app. I would like to use ng-bootstrap to include Bootstrap 4. However I would also like to customise Bootstrap's scss variables in my build as described at http://v4-alpha.getbootstrap.com/getting-started/options/.

How can I do this?

Answer 1

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
);

Answer 2

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=scss
cd 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.

Answer 3

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';