Bootstrap5不允許我向地圖添加其他顏色

我在為引導程式的顏色映射添加顏色時遇到問題。

這是我當前的匯入檔案：

// Required bootstrap components
@import "../../../node_modules/bootstrap/scss/functions";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

@import "../../../node_modules/bootstrap/scss/variables";
// `$theme-colors` is one of the variable that's declared in variables.scss
// therefore this line of code has to be placed after the variables import
$theme-colors: map-merge($theme-colors, $custom-colors);
// but in order for this to take effect it needs to be before the variables import

// Custom bootstrap
// This file has nothing in it, hence commented
//@import "_custom";

@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
.
.
.

根據引導程式的檔案，默認覆寫必須在變數匯入之前宣告，但為了使用現有變數，它需要放在變數匯入之后。

上面的代碼沒有添加自定義顏色，也沒有給出錯誤。

Zim 的答案有效，但不適用于 bg-[color] 類，如下所示：

    <!-- Works -->
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

    <hr>
    
    <!-- Doesn't work -->
    <div class="p-3 mb-2 bg-custom-primary text-white">.bg-custom-primary</div>
    <div class="p-3 mb-2 bg-custom-secondary text-white">.bg-custom-secondary</div>
    <div class="p-3 mb-2 bg-custom-success text-white">.bg-custom-success</div>
    <div class="p-3 mb-2 bg-custom-danger text-white">.bg-custom-danger</div>
    <div class="p-3 mb-2 bg-custom-warning text-dark">.bg-custom-warning</div>
    <div class="p-3 mb-2 bg-custom-info text-dark">.bg-custom-info</div>
    <div class="p-3 mb-2 bg-custom-light text-dark">.bg-custom-light</div>
    <div class="p-3 mb-2 bg-custom-dark text-white">.bg-custom-dark</div>
    <div class="p-3 mb-2 bg-custom-body text-dark">.bg-custom-body</div>
    <div class="p-3 mb-2 bg-custom-white text-dark">.bg-custom-white</div>
    <div class="p-3 mb-2 bg-custom-transparent text-dark">.bg-custom-transparent</div>

我正在使用引導程式5.1.3

如何將自定義顏色添加到 bootstrap 5？

uj5u.com熱心網友回復：

我不確定您在 _custom 中有什么，但是您創建的 $custom-colors 映射應該可以正常作業以生成其他顏色。

首先匯入函式和變數，將$custom-colors映射與合并$theme-colors，最后@import bootstrap（你可以匯入整個東西，或者像你所做的那樣單獨模塊）：

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

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

SASS 演示

另一個需要注意的重要事項是，在 5.1.x 中，您需要按照此處的說明執行更多操作才能生成自定義text-和bg-類。另見問題：https : //github.com/twbs/bootstrap/issues/35297

標籤：

上一篇：從引導程式5按鈕復制樣式到標簽

下一篇：如何將按鈕與下拉行內與其他鏈接錨對齊