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

Question

I use Angular-Cli to create an Angular 4. application. I would like to use ng-bootstrap to enable Bootstrap 4. However, I would also like to configure the Bootstrap scss variables in my assembly, as described in http://v4-alpha.getbootstrap.com / getting-started / options / .

How can i do this?

Answer 1

Angular CLI stories give the answer at https://github.com/angular/angular-cli/wiki/stories-include-bootstrap , which I will describe below. Note that I have yet to figure out how this interacts with ng-bootstrap .

Create project:

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

Install Bootstrap 4:

 npm install bootstrap@next --save 

Project setup

Create an empty _variables.scss file in src/ , in which your style modifications will change.

In styles.scss add the following:

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

Test project

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

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

When configuring the application, run ng serve to start the application in development mode. In the browser, navigate to localhost:4200 .

Make sure the button is styled in the bootstrap style. To ensure that your variables are used, open _variables.scss and add the following:

 $brand-primary: red; 

Return the browser to change the font color.

Answer 2

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

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

Short version: theme colors are now in a nested object, so things like $ brand-primary no longer apply - now we need to change $ theme-colors . This works, but now we have to replace the whole object, even if we want to edit only 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 3

The Angular CLI provides the styles configuration array in the .angular-cli.json configuration file. Here you can place the paths to scss files that you want to compile as part of starting your project.

You can add the path to this custom scss boot file that you write to this array and it will be compiled into styles for the application.

Answer 4

After understanding how scss can be included in angular 5 projet (see Using Sass with the angular CLI link), follow this boostrap guide to be more complete: https://getbootstrap.com/docs/4.0/getting-started/theming/

Answer 5

It finally worked. I wanted to integrate the loader 4.3.1 into my corner app 7.2.15.

Since the existing application had the default style mode as css - I used " Angular-cli from css to scss " to convert it to scss (style mode)

then referring to many places on the Internet, as well as to this page. The following steps helped me. (Thanks @Etherman and @Dan)

1. Install bootloader using npm
2. Create a file (e.g. theme.scss) for changing and modifying the color of the theme, see @Etherman tip
3. Then, as @Dan said, import the modified file from the src folder, then the boot scss file from node_modules in your styles.scss file.