我正在嘗試添加一些顏色變數，例如"blue"、"indigo" ... 來$theme-colors映射它的作業，但編譯后它在:root選擇器中顯示重復，如下圖所示。
結果如下：
圖片
這是我的_variables.scss檔案：
// 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";
我該如何解決這個問題？
uj5u.com熱心網友回復：
正如您在 Bootstrap 檔案中看到的那樣，自定義項應保存在單獨的檔案中。因此，您不應修改_variables.scss而是使用自定義顏色創建單獨的檔案。
自定義檔案部分看起來像這樣
此外，預計 :root 變數會出現兩次，因為您將它們與主題顏色映射合并。看看 :root 是如何內置的_root.scss...
首先迭代 $colors 映射。然后迭代 $theme-colors 映射，這樣它會變得完美，因為您在 :root 中看到了 --bs-blue、--bs-indigo 等......兩次。 ..
@each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value};
}
....
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
沒有什么可修復的，它按預期作業。也許如果您可以描述您要達到的目標而不是描述癥狀，那么會有不同的答案或更好的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/438893.html
上一篇：單擊自身時未取消選中單選按鈕