Question

尝试在Angular 6应用中使用Bootstrap 4点菜，就像在我的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 ??嵌入！./ node_modules / sass-loader / lib / loader.js ?? ref--15-3！./ node_modules / bootstrap / scss / _variables.scss）   模块构建失败（来自./node_modules/sass-loader/lib/loader.js）：

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

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

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

我在这里浏览了许多可能的解决方案，但是大多数人说将函数放在vars之前，这已经完成了，但错误仍然存在。

任何帮助都将不胜感激。

Answer 1

您可以将这些导入内容移到"src/styles.scss"文件中吗？

// src/styles.scss

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

Answer 2

在新版本中，您必须按如下方式导入引导程序变量。

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

Answer 3

我遇到了这个问题。所需要做的就是先导入函数，然后再进行其他导入：

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

Answer 4

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

darken（$ color，$ amount）`的参数$ color必须是颜色Bootstrap 4 Angular 6

4 个答案: