使用SASS函数主题颜色级别在bootstrap 4中创建自定义渐变

我已设置引导4个主题变量，如下所示：

// custom-theme.scss
$primary: green;
$secondary: purple;

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

然后自定义变量，如：

// custom-variables.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$idi-primary-12: theme-color-level(primary, -12);

然后按如下方式导入所有内容：

// custom-theme.scss
$primary: green;
$secondary: purple;

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

这将按预期更新引导类，如

btn primary

和

text secondary

（nice）

但是基于my$primary的自定义变量（$idi-primary-12）不起作用。我使用的是

主题颜色级别

SASS函数，如图中所示

当我在我的组件中使用它时

// myComponent.scss
@import "../custom-variables";

.myUserInfo {
    background-color: $idi-primary-12;
    color: color-yiq($idi-primary-12);
}

我得到蓝色阴影（这是引导/scss/variables.scss中的默认值）。而不是我的覆盖（绿色-如上所述）

问题：如何使用主题颜色级别函数，使用$primary（绿色）变量生成绿色的较淡版本？（而不是默认的蓝色）

其他信息：

主题颜色级别

使用

主题颜色

theme-color

按键从对象中提取

$theme-colors

（我使用的是主）

$theme colors

primary键设置为

$primary

（）

$primary

设置为蓝色（）

这应该被my

$primary=green覆盖来自custom-theme.scss。这就是btn primary工作的原因。（显示为绿色）。但是为什么不使用相同的重写变量来创建我的
$idi-primary-12
变量呢

---

我想你的拼写错误是，$primary而不是primary

$idi-primary-12: theme-color-level($primary, -12);

---

主题颜色级别意外地没有在内部使用重写的$primary值。相反，它采用默认的$primary值（蓝色）

我可以使用其他函数，它直接作用于我覆盖的$primary值

// custom.scss
$primary: green;

darken($primary, 10% )
lighten($primary, 10% )

---

AFAIK引导中的主题颜色级别函数将从主题字符串中获取两个参数，颜色名称（例如，'primary'，'info'）和级别，如下所示：

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

如果我们想对一些颜色使用这个函数，而不是主题颜色（例如“primary”），也许我们可以为此编写另一个函数，例如：

@function custom-color-level($color: pink, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

使用此自定义函数，我们可以将第一个参数作为颜色传递（例如#007bff，橙色）

实际上主题颜色级别采用主题键“primary”、“success”$primary保存一个颜色值：\