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";

Amoakuh

have you tried to import files like @import "../node_modules/bootstrap/scss/functions" – Faradic

Hi @Faradic - I have. I don't think the problem is that the files are not being found/imported – Amoakuh

Answer 1

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

Faradic

Wow - thanks @Faradic - 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 – Amoakuh

Thanks, I was also missing this import since I was upgrading from 4 to 5 – Whitelaw

Awesome how their own documentation doesn't mention this..thanks – Vaivode

@debugger, where do I have to put that import line? – Elgon

@MatiasNovillo add it right after the imports of variables and mixins but before root. – Chrono

Answer 2

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';

Rioux

You can see the order Bootstrap puts them in in their bootstrap.scss file. – Barbaric

Nice. Thanks @AdamJohnson, couldn't get it to work using the bootstrap documentation either. Had to do trial and error to get this order. – Rioux

FYI, to get @import 'bootstrap/scss/alert'; works properly, we need to `@import 'bootstrap/scss/root'; as well. – Collative

Answer 3

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

Oxidize