|Boostrap 5|边框颜色不变

Question

我设置了 Bootstrap 规则来更改基本颜色（主要颜色、次要颜色等...）

除了边框颜色之外，所有内容（按钮、悬停等、表格等）都可以进行更改……我不明白为什么。

这是我的代码的一些部分。

我的数组在

app.css

//config Bootstrap colors set
@import "~bootstrap/scss/bootstrap";

$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);
@import "~bootstrap/scss/bootstrap";

以及边框使用的示例。我也尝试过使用完整边框，但它也不起作用。我更改的任何颜色都会被渲染。

<li class="nav-item border-bottom border-3 border-primary mb-2">
    <a class="nav-link" href="#">
        <span data-feather="bar-chart-2">Rapports</span>         
    </a>
</li>

Answer 1

您不想在更改之前@import所有引导程序。相反，@import 所需的 SASS 源文件，然后设置更改。

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

/* Variable overrides */
$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);

@import "~bootstrap/scss/bootstrap/";

演示