Bootstrap v5.1.3：将 $colors 与 $theme-colors 地图合并

Question

我正在尝试添加一些颜色变量，例如“蓝色”、“靛蓝” ... 到 $theme-colors 映射是可行的，但编译后它在 :root 选择器中显示重复，如下图所示。

结果如下：

Image

这是我的_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";

我该如何解决这个问题？

Answer 1

您可以 read in the Bootstrap docs，自定义应保存在单独的文件中。因此，您不应修改 _variables.scss，而应使用您的自定义颜色创建单独的文件。

自定义文件部分会 look like this

例如：custom.scss

@import "bootstrap/functions";
@import "bootstrap/variables";

$custom-colors: (
    "blue": $blue,
    "indigo": $indigo,
    "purple": $purple,
    "pink": $pink,
    "yellow": $yellow,
    "teal": $teal
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "bootstrap";

此外，预计 :root 变量会出现两次，因为您将它们与 theme-colors 映射合并。看一下 :root 是如何在 _root.scss...

中构建的

首先对 $colors 地图进行迭代.. 然后对 $theme-colors 地图进行迭代，这样它就完美了，因为你看到了 --bs-blue, --bs-indigo , 等等...两次在 :root...

 @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

  ....

  @each $color, $value in $theme-colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

没有任何需要解决的问题，一切正常。也许如果您可以描述您想要实现的目标而不是描述症状，那么会有不同的答案或更好的解决方案。

Bootstrap v5.1.3：将 $colors 与 $theme-colors 地图合并

Bootstrap v5.1.3: merge $colors with $theme-colors map

css

sass

twitter-bootstrap

bootstrap-5