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 () 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 stylesheetAny help would be appreciated as the articles I've read suggest doing what I have done but obviously theirs work :)
UPDATE
Using this Bootstrap 5 - Custom theme-colors not updating classesthe 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";4 Answers
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
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';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:
Im still getting the error even Im adding the following import
1
