I created a subtheme of bootstrap5 theme on theme settings page (/admin/appearance/settings/bootstrap5).
I compile sass in my subtheme using dart-sass like this:
sass --watch scss/style.scss css/style.css
Everything seems to be okay but I discovered the follwing unclear behavior:
In _variables_bootstrap.scss I can find this line, where the variable $blue is overridden and set to #003CC5:
$blue: #003CC5 !default;
But when I remove this line (or make a comment out of it):
//$blue: #003CC5 !default;
the result is, that the value of the color variable $blue is still #003CC5 after sass compilation!
But I think it should not! $blue should have the default value of #0d6efd which is set in _variables.scss of Bootstrap 5.3.1 scss folder.
I can not find out if there is anothere place where $blue is overidden and set to #003CC5. I think there is no other place where $blue is overridden.
That's why $blue should have the value #0d6efd if the line
$blue: #003CC5 !default;
in _variables_bootstrap.scss is removed and Sass is compiled afterwords.
Can you help me to explain this behavior?
is it correct?
And why?
Are there similar behaviors elsewhere?
Closed: duplicate
3.0
Code
Okay, I found out, that $blue is set here:
/web/themes/contrib/bootstrap5/scss/_variables_bootstrap.scss
$blue: #003CC5 !default;
This should be removed!
refer to https://www.drupal.org/project/bootstrap5/issues/3366009 🐛 default colors don't match with vanilla bootstrap 5 Fixed