12

I want to change bootstrap's default theme-colors with SASS , the problem is when I change a color and compile , it gives me invalid CSS value error.

I've read the docs and saw some tutorials on YouTube but I can't see where is the problem

I'm using bootstrap 5.1.0 , sass 3 this is my scss file:

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

$theme-colors: (
"primary": //some color here,
);

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

and this is the error I get in terminal

PS F:\Coding\projects\sepehr\client\src\styles> sass style.scss custom.css
Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, 
"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid 
CSS value.
   ╷
94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
   │                             ^^^^^^^^^^^^^
   ╵
Hamed Tahmasebi
  • 430
  • 1
  • 5
  • 12

3 Answers3

18

You need to import functions and mixins too...

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

Also see: Bootstrap 5 - Custom theme-colors not updating classes

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 3
    According to https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults it looks like only `functions` needs to be imported first, then your variables, then bootstrap's variables. – djKianoosh Aug 31 '21 at 16:48
4

This is weird, as this works with @import, but as they plan to remove @import, the docs suggest using @use. This code does not work using @use, it is still missing dependencies when using @use.

7FigureSwagger
  • 105
  • 11
2

Finally I found the error: It happens, when you mix different Versions of Bootstrap, example 5.02 (or older) and 5.2. or 5.1.0 Beware that your scss --load-path does not cover older bootstrap-versions or fragments from it! It causes functions.scss to be loaded from the older versions. These do not yet contain a map-loop function. The error above must actually mean that the function map-loop was not found! This is the compiler (or the error message to it) crap.

mkours
  • 390
  • 2
  • 11