I'm trying to add some color variables such as "blue", "indigo" ... to $theme-colors
map it's work but after compiling it shows duplicated in :root
selector like the image below.
Here is the result:
this is my _variables.scss file:
// Import functions
@import "../../../node_modules/bootstrap/scss/functions";
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: #c55e0a;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
$custom-theme-colors: (
"blue": $blue,
"indigo": $blue,
"purple": $blue,
"pink": $blue,
"yellow": $blue,
"teal": $teal
);
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
// Import required Bootstrap stylesheets
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../../node_modules/bootstrap/scss/bootstrap";
How I can fix this?
CodePudding user response:
As you can read in the Bootstrap docs, customizations should be kept in a separate file. Therefore, you shouldn't modify _variables.scss
but instead create seperate file with your custom colors.
The custom file portion would look like this
Also, it's expected that the :root variables would appear twice since you're merging them with the theme-colors map. Take a look at how the :root gets built in _root.scss
...
First the $colors map is iterated.. then the $theme-colors map is iterated so it would make perfect since you're seeing --bs-blue, --bs-indigo, etc... twice in the :root...
@each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value};
}
....
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
There is nothing to fix, it's working as expected. Maybe if you can describe what you're trying to achieve instead of describing a symptom there would be a different answer or better solution.