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:
As described by the code above

Theme color 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).

Leave a Reply

Your email address will not be published.