`darken($color, $amount)` 的参数 `$color` 必须是颜色 Bootstrap 4 Angular 6答案

【问题标题】：Argument `$color` of `darken($color, $amount)` must be a color Bootstrap 4 Angular 6`darken($color, $amount)` 的参数 `$color` 必须是颜色 Bootstrap 4 Angular 6
【发布时间】：2018-11-12 19:37:31
【问题描述】：

尝试在我的 Angular 6 应用程序中使用 Bootstrap 4 a la carte，就像在我的 angular.json 文件中一样...

"styles": [
              "node_modules/bootstrap/scss/_functions.scss",
              "node_modules/bootstrap/scss/_variables.scss",
              "node_modules/bootstrap/scss/_mixins.scss",
              "src/styles.scss"
            ]

在进行 sass 加载尝试后会在终端中产生此错误...

./node_modules/bootstrap/scss/_variables.scss 中的错误 (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./node_modules/bootstrap/ scss/_variables.scss) 模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：

未定义 ^ darken($color, $amount) 的参数 $color 必须是颜色

这是 _variables.scss 中有问题的行： $link-hover-color: darken($link-color, 15%) !default;

声明它上面的两行： $link-color: theme-color("primary") !default;

我在这里查看了许多可能的解决方案，但其中大多数都说将函数放在已经完成但错误仍然存在的 vars 之前。

非常感谢任何帮助。

【问题讨论】：

$color 的值是多少？
这是 _variables.scss 中有问题的行：$link-hover-color: darken($link-color, 15%) !default; 上面声明的两行：$link-color: theme-color("primary") !default;
您应该将该文件的相关部分放入您的答案中
将这些部分添加到我的问题中。
在您使用变量 $link-color 的代码上，而错误消息引用 $color - 您使用的是正确的变量吗？

标签： bootstrap-4 angular6

【解决方案1】：

我遇到了这个问题。所需要的只是在我的其他导入之前导入函数：

@import '../../node_modules/bootstrap/scss/functions';
// ... remaining bootstrap imports...

【讨论】：

【解决方案2】：

您能否将这些导入内容移至您的 "src/styles.scss" 文件中？

// src/styles.scss

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

【讨论】：

我可以。不是我想要的方式，但这有效并且不会引发错误。

【解决方案3】：

在新版本中，您必须导入引导变量，如下所示。

@import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables';

【讨论】：

【解决方案4】：

您应该在导入 src/styles.scss 文件中的变量之前从 node_modules 导入引导 scss 文件。

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

【讨论】：

那将是错误的方式。首先是变量。