Unable to override $theme-color in bootstrap 4

Question

It\'s bootstrap 4.0 with SASS

My style.scss file contains the following code:

@import \"../bootstrap/scss/bootstrap\";

@im         


        

Answer 1

I'm assuming that you have installed Bootstrap 4 beta using npm and you wish to customize the Bootstrap SCSS without modifying the source in node_modules.

The way I do it is by overriding the Bootstrap variables contained in variables.scss:

app-styles.scss

// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';

// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';

variables.scss

$theme-colors: (
    primary: $trump-hair,
    secondary: $gandalf-hat,
    success: $my-favorite-color,
    info: #FBC02D,
    warning: #FF5722,
    danger: $color-of-melena,
    light: #1B5E20,
    dark: $bile-green
);

The way to override bootstrap theme colors is actually due to be changed in the upcoming beta 2. The current requirement is that you have to include the entire theme-colors Sass map when overriding. In the current beta, failure to include the entire Sass map will result in:

Argument $color of darken($color, $amount) must be a color

Please see this Github issue and this Codepen for more information, and an example of how you will be able to override theme colors in beta 2.