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

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?

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.