|Boostrap 5|边框颜色不变

Question

大家好，

我设置了我的引导规则来更改基本颜色(primray，辅助等...)

改变一切(按钮，悬停等，表格等)，除了边框颜色。我不明白为什么。

下面是我的代码的一些部分。

我在app.css中的数组

@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所有的bootstrap。相反，@导入所需的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/";

Demo