Bootstrap 5 -自定义主题颜色不更新类

ghg1uchk 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(220)

我刚刚开始一个新的项目使用Bootstrap 5，我试图设置一些自定义值的主题颜色。然而，按照我一直以来的方式去做，却给了我一些问题。
我创造了三种颜色：$primary，$secondary，$tertiary.但是，如果我添加任何类，如bg-tertiary，那么没有任何变化，就好像它不存在一样。bg-primary只是使用Bootstrap定义的默认颜色。
我的代码如下：

@import "bootstrap/_functions";
@import "bootstrap/_variables";

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

@import "bootstrap/bootstrap";

如果我将一个默认值（如“dark”）更改为使用$tertiary，那么scss文件中使用$dark的任何代码都将更改为使用$tertiary中的值。如下所示：

$theme-colors(
    "dark": $tertiary
);

#pageFooter {
   background: $dark; //This becomes #3fb247 the value from $tertiary
}

我做错了什么？我不明白为什么scss文件中的变量会受到$theme-colors的影响，而类却不会。
编辑：
使用chrome inspector我可以看到.bg-primary使用了一个css变量--bs-primary-rgb。查看可用的变量--bs-primary已更改为我设置的颜色，但没有--bs-primary-rgb。
我怎样才能改变这个变量。应该自动完成吗？
随着进一步的研究，这些rgb变量似乎已经在Bootstrap 5.1中引入。我找不到太多关于如何让变量更新到我设置的值的信息，可能是因为它太新了。所以我选择回到5.0.2，现在一切都像我期望的那样工作。

twitter-bootstrap

来源：https://stackoverflow.com/questions/68755179/bootstrap-5-custom-theme-colors-not-updating-classes

3条答案

按热度按时间

2jcobegt1#

Bootstrap 5.1.0

最近对text和bg类创建方式的更改要求在5.1.0中进行额外的SASSMap合并

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-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");

@import "bootstrap";

Bootstrap 5.0.2

如果你想让它生成像bg-tertiary、btn-tertiary等类，你需要使用map-merge向theme-colorsMap添加一个“第三”变量。

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

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

Demo

赞(0）回复(0）举报 2023-05-27

nvbavucw2#

自Bootstrap 5.1.3起，背景颜色组件不会自动生成

$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

手册上写着，
不幸的是，目前并不是每个组件都使用这个SassMap。未来的更新将努力改善这一点。在此之前，请计划使用${color}变量和此SassMap。
下面是在Bootstrap 5.1.3中 * 手动 * 添加.bg-*类的一种方法。使用Parcel V 2.3.2编译

/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";

$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-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");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};

示例html

<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>

页面呈现如下所示

赞(0）回复(0）举报 2023-05-27

bpsygsoo3#

我能够通过下面的代码在Bootsrap 5.1.x上实现这一点

@import "bootstrap/scss/bootstrap";

$red:   #FF0000;
$green: #00FF00;
$blue:  #0000FF;

$custom-colors: (
  'custom-red':   $red,
  'custom-green': $green,
  'custom-blue':  $blue,
);

$utilities: map-merge(
  $utilities,
  (
   "background-color": (
      property: background-color,
      class: bg,
      values: $custom-colors
    ),
  )
);

@import "bootstrap/scss/utilities/api";

这样你就可以使用自定义的背景类：

.bg-custom-red
.bg-custom-green
.bg-custom-blue
参考文献：

https://getbootstrap.com/docs/5.2/utilities/background/
https://getbootstrap.com/docs/5.2/utilities/api/#using-the-api

赞(0）回复(0）举报 2023-05-27

我来回答

Bootstrap 5 -自定义主题颜色不更新类

3条答案

相关问题

热门标签

最新问答