Another type of Bootstrap customization you may want to try is to override some of the defaults Bootstrap uses for styling to make your application unique from the default theme. Bootstrap makes this easy to accomplish by overriding the values defined in _variables.scss. If we copied Bootstrap's Sass files into our application's style directory, we would accomplish this by just adding our variable declarations to the _custom.scss partial in Bootstrap's source. This file is empty by default, which might seem strange, but its intention is to be a place where you can safely override Bootstrap variables without conflicting with any of Bootstrap's Sass dependencies. In an Angular application, all we need to do is define our own custom variables at this same point in the process before any of the other Bootstrap partials are loaded:
// Core variables and mixins
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$body-bg: $gray-dark;
$body-color: $gray-light;
...
$variable: "Value" !default;
Default variables in Sass are only set if the variable does not exist in Sass when it is declared. So, if we declare a Sass variable before it is set with a default flag, our custom value will continue on as the set value, with Sass ignoring this instruction to recreate an existing value. This is very useful for providing overrides to values in frameworks such as Bootstrap, but can also be used by Component styles in Angular or any custom Sass configurations in your application.
The Sass variables $body-bg and $body-color can be found in /node_modules/bootstrap/scss/_variables.scss. We are able to use colors declared earlier in Bootstrap's Sass to change the default style of our body background and text colors.
If we wanted to do a lot of customization, it would be cleaner to simply make our own Bootstrap reset partial, and simply import that instead:
// Core variables and mixins
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "styles/reset/bootstrap"
...