As I delve into using Scss for Bootstraps 5, a new issue has arisen that I am struggling to resolve with the help of internet resources.
Initially, I successfully compiled and made changes to my Sass file when importing the following declarations:
@import "../lib/bootstrap/scss/_functions.scss";
@import "../lib/bootstrap/scss/_variables.scss";
@import "../lib/bootstrap/scss/_mixinx.scss";
These imports allowed me to manipulate position values, colors using map-merge, and custom variables seamlessly.
However, upon trying to add a custom utility (for adjusting width) by mapping and importing utilities.scss, all functionality ceased. Despite consulting tutorials and forums for guidance, none of my existing mappings seemed to work. I attempted reorganizing import statements without success, unable to find a solution specific to my issue.
Here is a snippet of my sass file code:
// Variable overrides Below Here
$BethanyGreen: #8eacac;
$Test: #2a609c;
// Variable overrides Above here
// Import function and variables
@import "../lib/bootstrap/scss/_functions.scss";
@import "../lib/bootstrap/scss/_variables.scss";
@import "../lib/bootstrap/scss/_mixins.scss";
@import "../lib/bootstrap/scss/_utilities.scss";
@import "../lib/bootstrap/scss/_helpers.scss";
@import "../lib/bootstrap/scss/utilities/_api.scss";
// Variable Mapping Below Here
$Custom-Position-Values: ( 5: 5%, 10: 10%, 15: 15%, 20: 20%, 25: 25%, 30: 30%, 35: 35%, 40: 45% );
$position-values: map-merge($position-values, $Custom-Position-Values);
$Custom-Colors: ( "BethanyGreen": $BethanyGreen, "Test": $Test );
$theme-colors: map-merge($theme-colors, $Custom-Colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
$Custom-Width-Util: ( 10: 10%, 15: 15%, 20: 20%, 30: 30%, 40: 40%, 45: 45%, 60: 60% );
$utilities: map-merge($utilities,("width": map-merge(map-get($utilities, "width"), (values: $Custom-Width-Util))));
//Variable Mapping Above Here
//Import Bootstrap
@import "../lib/bootstrap/scss/bootstrap.scss";
Actions taken thus far include:
- Commenting out all new code and import statements resulted in the previous functionality returning, pointing to an issue related to _utilities.scss or positioning.
- Experimented with different orders of import statements, such as placing _utilities.scss first, last, between others, but none resolved the problem.
Initially, the custom map-merge using $utilities was functional, albeit without any effect on color components. Following adjustments, none of it seems to be working. Any assistance offered would be greatly appreciated, thank you in advance for your time.