Use Bootstrap SASS with Angular CLI

Create a new Angular CLI project with the SASS style option:

ng new my-app --style=sass
cd my-app

Installation

Install the SASS version of the Bootstrap project with:

npm install bootstrap-sass --save

Configuration

In the src/assets/ directory, create a directory named bootstrap-sass with an empty file named: _variables.scss.

In the _variables.scss file, paste the content from:

node_modules/bootstrap-sass/assets/stylesheets/bootstrap/\_variables.scss

In the _variables.scss file, find the line with $icon-font-path and change it to point to the proper directory:

\$icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/" !default;

In src/styles.sass, add the following:

@import "assets/bootstrap-sass/variables";
@import '../node_modules/bootstrap-sass/assets/stylesheets/\_bootstrap';

Development

Now run the project with the ng serve command. The Bootstrap styles should be applied to your HTML, which you can view by directing your browser to http://localhost:4200.

Angular JavaScript