How to customize bootstrap 4 using angular-cli

Question

I have an Angular 4 application using angular-cli 1.0 and Bootstrap 4-alpha6. I want to customize Bootstrap 4. E.g. change the color of the primary buttons.

It must be a future proof solution. That means my customizations must survive upgrades of bootstrap at a later point in time.

I have integrated bootstrap by: Adding "bootstrap": "4.0.0-alpha.6", to the dependencies in my package.json file. Furthermore I added

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

to "apps" in angular-cli.json.

My first try was to create a new file called style.scss, put it into src/assets and also reference it in angular-cli.json.

The content could look like this:

@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$body-bg:    $gray-dark;
$body-color: $gray-light;

When running ng serve the application comiles fine but I do not see any changes.

Did I even start in the right direction? How would I properly customize bootstrap buttons/styles via sass in a clean angular-cli workflow?

You can find the source here: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

Answer 1

The values you're attempting to change $body-bg & $body-color are SASS values, not CSS values.

So you will need to reference the SASS files not the CSS file.

Update the default style file from styles.css to styles.scss and in that file...

// set the variables you wish to change
$body-bg:    $gray-dark;
$body-color: $gray-light;
// import in the bootstrap SASS file
@import '../node_modules/bootstrap/scss/bootstrap'

You can read more here.