Bootstrap SASS: Default theme colors no longer work after defining my own custom theme colors

Question

I am experimenting with scss/sass for the first time while trying to customize the theme colors for my site which uses Bootstrap.

The entirety of my SCSS file is as follows:

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

$action-blue: #165c7d;
$primary-blue: #1b365d;
$theme-colors: (
        "action-blue": $action-blue,
        "primary-blue": $primary-blue
);

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

The css version of this file is linked in my sites header (bootstrap is not separately referenced since it's imported here)

For some reason, declaring these two theme colors is causing all other themes to no longer apply, almost as if it's completely overwriting the sass map instead of extending it. All of my buttons which previously relied on the primary, secondary, info, etc. themes are displaying without any theme at all, simply as plain text with no colors or anything.

Here are some screenshots to show what I mean (ignore the inconsistent fonts). They show two seperate rows of buttons, the top has various default theme colors, the bottom is using my own primary-blue. The first picture shows it using my code above, and the second shows it with the theme colors commented out:

If I comment out the $theme-colors: (...); section, leaving just the @import's, then the defaults work normally (while my custom colors obviously stop working).

VVS VVS · Accepted Answer · 2021-08-20T10:22:47

From reading your question, my understanding is your trying to extend the $theme-colors and what your actually doing here is trying to override the colors.

But what you don't realize is that scss files are preprocessed, which means they are processed during project build time to generate native css files that the browser can understand.

Long story short, the below (which is what your doing, is overriding colors which don't exist, so you break the process of generating these native css files)

("action-blue" & "primary-blue" don't exist in $theme-colors)

$theme-colors: (
   "action-blue": $action-blue,
   "primary-blue": $primary-blue
);

What your trying to achieve is to extend the $theme-colors so to do this from looking at the Documentation you need to do the following:

This is to Add to mappings (extend)

// Create your own map
$custom-colors: (
   "action-blue": $action-blue,
   "primary-blue": $primary-blue
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

This is to Modify the mappings (provided they exist)

$primary: #0074d9;
$danger: #ff4136;

// Override the existing map
$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Bootstrap SASS: Default theme colors no longer work after defining my own custom theme colors

1 Answers