如何在 Angular 上使用扩展的 bootstrap 5 种颜色？

Question

我在 Angular 12 项目（使用 scss）上使用 Bootstrap 5，但我找不到使用新扩展 bootstrap 5 调色板的方法（比如 indigo-300 或 pink-200 等）我不知道我是否需要以某种方式导入它们，或者我该如何在 Angular.

上导入它们

Answer 1

经过询问和核实，我得出了两个结论：

如果您只想在 class 中使用这些颜色，只需使用变量

.custom
{
    color:$indigo-300;
}

但是如果你想用作原色，例如你的 styles.scss 应该是

//see it's necesary import both scss/functions and scss/variables

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

$primary:       $pink-600;
$secondary:     $yellow-300;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

//futhermore it's necesary override the $theme-colors

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


@import '../node_modules/bootstrap/scss/bootstrap.scss';

如何在 Angular 上使用扩展的 bootstrap 5 种颜色？

How can I use extended bootstrap 5 colors on Angular?

css

sass

colors

angular

bootstrap-5