Bootstrap SCSS: $color: theme-color("primary") is not a color

Question

I'm trying to override bootstrap4 styles. I have no experience with Sass, but this looks like an error in the bootstrap SCSS file.

My custom file is:

/* custom.scss */    
/* -------begin customization-------- */  
$body-bg: #000;
$body-color: #111;
/* -------end customization-------- */  

/* import the necessary Bootstrap files */
@import "/bootstrap-4.0.0/scss/_variables.scss";

I'm using bootstrap 4.4.1, but could only find a scss file for 4.0.0.

On

sass /custom.scss /custom.css 

I get:

 $color: theme-color("primary") is not a color.
    ╷
152 │ $link-hover-color:          darken($link-color, 15%) !default;
    │                             ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  /bootstrap-4.0.0/scss/_variables.scss 152:29  @import
  /custom.scss 8:9                   root stylesheet

The target custom.css file contains:

> /* Error: $color: theme-color("primary") is not a color.  *     ,  *
> 152 | $link-hover-color:          darken($link-color, 15%) !default; 
> *     |                             ^^^^^^^^^^^^^^^^^^^^^^^^  *     '  *   /scss/_variables.scss 152:29  @import  *   custom.scss 8:9                 root stylesheet */
> 
> body::before {   font-family: "Source Code Pro", "SF Mono", Monaco,
> Inconsolata, "Fira Mono",
>       "Droid Sans Mono", monospace, monospace;   white-space: pre;   display: block;   padding: 1em;   margin-bottom: 1em;   border-bottom:
> 2px solid black;   content: 'Error: $color: theme-color("primary") is
> not a color.\a     \2577 \a 152 \2502  $link-hover-color:         
> darken($link-color, 15%) !default;\a     \2502                        
> ^^^^^^^^^^^^^^^^^^^^^^^^\a     \2575 \a   /scss/_variables.scss 152:29
> @import\a   \/custom.scss 8:9                   root stylesheet'; }

Any insights?

Answer 1

The problem is the order in which you have imported the files. Please try this way and see if it works

1. First import the bootstrap functions and variables

/* === Import Bootstrap functions and variables === */
@import "/bootstrap/scss/functions";
@import "/bootstrap/scss/variables";

2. Import you custom variable file in which you have overrided the bootstrap theme-colors and other bootstrap variables.

/* === Import Custom variables === */
@import '/variables';

3. Finally, the bootstrap main scss: So that new one is created based on your theme variables ( 2nd step ) and is applied throughout the application

/* === Boostrap Main SCSS === */
@import "/bootstrap/scss/bootstrap";