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