_custom.scss alternatives

Now that _custom.scss has been remove in https://github.com/twbs/bootstrap/pull/22821, I wonder how builds with custom colors and the likes could be made. My build so far was

1. Clone twbs/bootstrap to a temporary location
2. Copy my _custom.scss into the scss directory
3. Run npm build scripts
4. Copy the compiled .css and .js files to my project

The PR mentions it was nuked “in favor of relying on imports from package manager directories” but I have a hard time following? Anyone care to explain?

[TheHokieCoder]

@supergithubo

Marking a variable with !default will make the previous variable assignment important.

Be careful making a statement like that. It will make any previous assignment more important than the assignment using !default, but it won’t be the same as the previous assignment being !important.

I assume bootstrap is expecting overrides BEFORE _variables.scss because !default is put on every variable inside _variables.scss.

I wouldn’t say “expecting”, but rather “supports”. The !default keyword really only applies to previously defined variables. Consider the 3 examples below:

// #1
$var: #CCC;
$var: #FFF;

// #2
$var: $FFF;
$var: $CCC !default;

// #3
$var: #CCC !default;
$var: #FFF;

Example 1 is a plain example where the second declaration would override the first. Example 2 is from how Bootstrap used to support custom overrides by defining their values as defaults that only get set if no previous value was declared. Example 3 is how my setup works. Example 3 is effectively equivalent to example 1 since the !default flag bears no effect on the second declaration. Therefore all 3 examples end in the same result. $var will be #FFF when the SASS compiler does its thing.

So, while your suggestion/point does work for overriding Bootstrap’s default values, it still has a major issue (in my opinion): Your custom-variables.scss is a copy of _variables.scss. If you only want to override a few variables, why make a copy of ~900 lines of code just to change a few? Also, as Bootstrap evolves and they make changes, you’ll have to manually merge changes from _variables.scss to your custom-variables.scss. Otherwise you might be still declaring variables that are no longer used.

In my previous comment I made a point about changing only the primary theme color, which using your method would result in having to copy the declarations for $theme-colors map, $colors map, all of the individual colors variables, $grays map, and all of the individual gray color variables. By my count that is 58 lines of variable declarations that need to be copied just to change one color value. Using my method, however, I would only have to redefine the $theme-colors map, or 10 lines of code.

I DID, however, find a way where Bootstrap could provide its default map values and a developer could override specific keys in a file BEFORE the _variables.scss (like supergithubo proposes):

// In a custom variables file...
$theme-colors: (
  primary: red
);


// In Bootstrap's _variables.scss file...
$theme-colors: () !default;
$theme-colors: map-merge((
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
), $theme-colors);

The first line in the Bootstrap file, $theme-colors: () !default; is in case the developer does not declare (to override) the $theme-colors map. In that case, it provides a default, empty map to merge in the next line.

The second line declares Bootstrap’s default map as the first input to map-merge which is then overridden by values in the $theme-colors map variable. So in the example above, 3 lines allowed me to override the primary key in the map without harming the defaults for the other keys.

If this change could be made to all maps in _variables.scss, then you could import your own custom Bootstrap variables file into your project without unnecessary duplication of variables, then import the completely untouched Bootstrap source tree, then import whatever else you need.

[supergithubo]

I assume bootstrap is expecting overrides BEFORE _variables.scss because !default is put on every variable inside _variables.scss.

The !default works like this:

$var: #000;
$var: #FFF !default;
//Assign #FFF to $var if $var is null or unassigned
//Since $var is previously assigned, then #000 still $var's value

Marking a variable with !default will make the previous variable assignment important. It’s like a reverse of !important. In my opinion, Sass !default is confusing.

Because of this, I setup all custom variables on BEFORE/TOP of bootstrap and setup custom styles/mixin overrides on AFTER/BOTTOM of bootstrap:

@import "custom-variables";
@import "bootstrap";
@import "custom-styles"

(Note: custom-variables.scss is a copy of _variables.scss)

You can also assign further custom variables on top (useful for white-labeling):

@import "client-brand-colors"; //variables w/wo !default (highest priority)
@import "app-variables";//variables w/ !default (higher priority)
@import "bootstrap";
@import "app-styles";
@import "client-styles";