Better docs for overwriting base vars

[DaniG2k]

Hello all,

I'm wondering how to override the base Bootstrap variables once I've installed this gem into my Rails app. The docs mention how to do so if I am using Compass, but I am not. I've simply included the gem and required it into my assets.

How can I override the variables otherwise?

Thanks

[cyrilsuzat]

To customize your variables, you can create a file with the variables you want to modify, and then import it before Bootstrap :

// assets/stylesheets/_variables.scss
$colors: (
  primary: #c00,
  my_color: #663
);

$enable-rounded: false;
$body-bg: #ccc;

// assets/stylesheets/application.scss
@import "variables";
@import "bootstrap";

h1 {
  color: color("my_color");
}

You will find more info on customizing variables here

[sandhilt]

@cyrilsuzat Here is not working.

[abbottry]

@SandHilt Beta2 supports

I wanted to change the primary color and wasn't able to until this release, now the following works:

$theme-colors: (
  "primary": #0074d9
);

Details Here: http://getbootstrap.com/docs/4.0/getting-started/theming/#maps-and-loops

[brandon-carag]

I was having issues seeing a $brand-primary variable customization take effect. As @abbottry mentioned, the only way I was able to change things was by using the $theme-colors sass map as he did (which seems like it's a basic key-value store).

Info on sass maps: https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184