如何在 Angular 上使用扩展的引导程序 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';