Undefined variable $theme-colors-rgb in Bootstrap root.scss

Question

I am trying to use some parts of Bootstrap 5.2 within my Angular project. It is configured for SASS and so I am importing the scss files for Bootstrap within the main style.scss of the project. I am doing this as I am using Angular Material and so only want the Bootstrap Grid and some other basic parts.

Currently I have

style.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/grid";

I am only including the root.scss as this is as described in the Bootstrap docs (https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults) but removing it makes the ng build ONLY fail within the grid.scss as the $gutters variable is undefined. With it included however the output of ng build is:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
20 │   @each $color, $value in $theme-colors-rgb {
   │                           ^^^^^^^^^^^^^^^^^
   ╵
  node_modules\bootstrap\scss\_root.scss 20:27  @import
  src\styles.scss 22:9                          root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
20 │   @each $color, $value in $theme-colors-rgb {
   │                           ^^^^^^^^^^^^^^^^^
   ╵
  node_modules\bootstrap\scss\_root.scss 20:27  @import
  src\styles.scss 22:9                          root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
114 │       @each $key, $value in $gutters {
    │                             ^^^^^^^^
    ╵
  node_modules\bootstrap\scss\mixins\_grid.scss 114:29       @content
  node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
  node_modules\bootstrap\scss\mixins\_grid.scss 72:5         make-grid-columns()
  node_modules\bootstrap\scss\_grid.scss 32:3                @import
  src\styles.scss 26:9                                       root stylesheet

Any help would be appreciated as the articles I've read suggest doing what I have done but obviously theirs work :)

https://www.amadousall.com/the-best-parts-of-bootstrap-you-are-missing-in-angular-material/

UPDATE

Using this Bootstrap 5 - Custom theme-colors not updating classes the following change (Though I don't want a tertiary colour) removes the error of an undefined $theme-colors-rgb but the $gutters issue remains

style.scss


@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";

@import "~bootstrap/scss/grid";

have you tried to import files like `@import "../node_modules/bootstrap/scss/functions"` — debugger, Aug 18 '22 at 09:52
Hi @debugger - I have. I don't think the problem is that the files are not being found/imported — Mad Eddie, Aug 18 '22 at 09:54

debugger · Accepted Answer · 2023-02-16T02:56:40.620

53

Bootstrap 5.2

I think you need to add @import "~bootstrap/scss/maps" because there is a new _maps.scss in version 5.2 where the following properties have been shifted :

$theme-colors-rgb

$utilities-colors

$utilities-text

$utilities-text-colors

$utilities-bg

$utilities-bg-colors

$negative-spacers

$gutters

edited Feb 16 '23 at 02:56

answered Aug 18 '22 at 10:03

debugger

1,442
1
9
14

1

Wow - thanks @debugger - I didnt find that suggesting anywhere in my searching. It works now - and I can remove the extra code I added in the update I made to my post! Most grateful – Mad Eddie Aug 18 '22 at 10:13
1

Thanks, I was also missing this import since I was upgrading from 4 to 5 – Timothy Oct 03 '22 at 17:16
1

Awesome how their own documentation doesn't mention this..thanks – Oli Nov 03 '22 at 10:59
1

@debugger, where do I have to put that import line? – Matias Novillo Feb 17 '23 at 18:59
@MatiasNovillo add it right after the imports of `variables` and `mixins` but before `root`. – Karla Lopez Jul 11 '23 at 17:56

score 4 · Answer 2 · answered Jul 06 '23 at 13:00

Adding to the accepted answer, can't edit or comment on it.

After upgrading to 5.3.0 you also have to @import "~bootstrap/scss/variables-dark". And it looks like it's not changing according to this github issue: https://github.com/twbs/bootstrap/issues/38683

score 1 · Answer 3 · answered May 24 '23 at 10:07

1

Im still getting the error even Im adding the following import

answered May 24 '23 at 10:07

Umer Hakim

11
1

1

Welcome to StackOverflow. Comments can only be used to provide a solution. If you still have a problem and the solution above doesn't work for you, post a new question. Before you do that, make sure to check all other similar questions. – Rok Benko May 24 '23 at 10:57

score 0 · Answer 4 · answered Aug 28 '23 at 13:52

As of Bootstrap v5.3 this is how I was able to get it to work and the order is important:

@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/utilities';

Undefined variable $theme-colors-rgb in Bootstrap root.scss

4 Answers4

Linked