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

Answer 4

Finally It worked. I wanted to implement bootstrap 4.3.1 in to my angular 7.2.15 app.

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

then referring many places on the internet and this page as well. Following steps worked for me. (Thanks to @Etherman and @Dan)

1. Install bootstrap using npm
2. Create a file (for example theme.scss) for theme color changes and modifications, refer @Etherman tip
3. Then as @Dan said import the modified file from src folder then the bootstrap scss file from node_modules in your styles.scss file.

Answer 5

The Angular CLI provides a styles configuration array in its .angular-cli.json config file. In here, you can place paths to scss files that you want to compile as part of running your project.

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

Answer 6

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

Answer 7

Instead of modifying the source files located in node_modules\bootstrap\scss, a better approach would be to create your own .scss stylesheet with the variables that you might want to override.

For example, if you're overriding these two variables from Bootstrap’s default configuration:

$primary;
$success;

1. Create a sass file. For the purposes of this example, we will create ours at src/assets/scss/main.scss

2. Declare your new variables

   $primary: #5f5ca3;
   $success: #4ebc94;
   

3. Lastly, and most crucial, import the main.scss class you just created. Make sure you do it before you import the Bootstrap stylesheets.

It might seem counterintuitive to import variable overrides before importing the variables themselves, but that's what you need to do here.

If you look at that _variables.scss file(node_modules/bootstrap/scss/_variables.scss), you'll see that plenty of the variable definitions are followed by !default.

That's the SCSS way of saying: "If this variable isn't already defined, then define it here."

But you already defined those two variables yourself. So they won't get redefined.

So your src/styles.scss should look something like this:

/* importing KOR theme */
@import './assets/scss/main;

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

// other style declarations and global configurations

I hope this helps! Here's the documentation from the Bootstrap team.