|引导程序5|边框颜色不变

Question

大家好，

我设置 bootstrap 规则来更改基本颜色（主色、辅助色等...）

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

这是我的部分代码。

我的数组在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。相反，@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/";

Demo

|引导程序5|边框颜色不变

|Boostrap 5| Border colors don't change

border

bootstrap-5