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

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

CodePudding user response：

I think you need to add @import "~bootstrap/scss/maps" because there is a new _maps.scss in version 5.2 where the property $theme-colors-rgb exists.