How to Properly add to Bootstrap Variables file from Child Theme

[slashdotblake]

I am having some issues loading new variables into bootstrap through the _child_theme_variables.scss file. Overwriting existing variables works, but if I want to add to or create something new, it fails to update the bootstrap code file.

I attempted to re import bootstraps functions and variables along with the bootstrap folder. It does not appear to be updating with the new information.

See code below placed in the _child_theme_variables.scss file:

// Use this file to overwrite the basic Bootstrap variables and add your own variables
// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder.
// Just copy a variable from src/sass/assets/bootstrap5/_variables.scss, paste it here and edit the value.

$purple:#ac00e6; // Thats a sample how you could change a BootStrap variable.
$primary: $purple; // Once we've changed the value, we'll also make it the primary brand color.

$container-max-widths: (
xl: 1104px,
);

// import the functions and variables
@import "src/sass/assets/bootstrap5/_functions";
@import "src/sass/assets/bootstrap5/_variables";

$custom-theme-colors: (
"oceanblue": #b3d9ff,
);

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

// import Bootstrap
@import 'src/sass/assets/bootstrap5';

[IanDelMar]

What do you mean by "it fails to update the bootstrap code file"? What exactly is failing? What are you trying to achieve?

[slashdotblake]

With the above code and import links I am unable to add to bootstraps _variables.scss file indirectly from the child theme's _child_themes.scss file. Replacing existing variables works. Although when I attempt to add new ones, see $custom-theme-colors above, it fails to update the bootstrap variables file.

I am thinking that I am either doing my imports incorrectly from the child_theme_variables file or one of Understraps theme files needs to be adjusted to re important bootstrap after it compiles the SASS. If you could provide some examples on how to resolve this issue that would be excellent.

[IanDelMar]

Sidenote: Wrapping code in "```" makes it much easier for others to read.

Always check the console output. It shows compilation errors. As in this case, where the console says

Error: Can't find stylesheet to import.
   ╷
17 │ @import "src/sass/assets/bootstrap5/_functions";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\sass\theme\_child_theme_variables.scss 17:9  @import
  src\sass\child-theme.scss 1:9                    root stylesheet

The compilation failed because of wrong references to the files to import.

Try this:

// Use this file to overwrite the basic Bootstrap variables and add your own variables
// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder.
// Just copy a variable from src/sass/assets/bootstrap5/_variables.scss, paste it here and edit the value.

$purple:#ac00e6; // Thats a sample how you could change a BootStrap variable.
$primary: $purple; // Once we've changed the value, we'll also make it the primary brand color.

$container-max-widths: (
	xl: 1104px,
);

// import the functions and variables
-@import "src/sass/assets/bootstrap5/_functions";
+@import "../assets/bootstrap5/_functions";
-@import "src/sass/assets/bootstrap5/_variables";
+@import "../assets/bootstrap5/_variables";

$custom-theme-colors: (
	"oceanblue": #b3d9ff,
);

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

-// import Bootstrap
-@import 'src/sass/assets/bootstrap5';

Please mark your question as answered if this solves the problem.