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

Question

我在 Angular 12 项目（使用 scss）上使用 Bootstrap 5，但我找不到使用新的扩展 Bootstrap 5 调色板（如 indigo-300 或 Pink-200 等）的方法，我不知道如果我需要以某种方式导入它们，或者我该如何在 Angular 上做到这一点。

Answer 1

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

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

.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';