Аргумент `$ color` для` darken ($ color, $ amount) `должен быть цветом Bootstrap 4 Angular 6

Question

Попытка использовать Bootstrap 4 a la carte в моем приложении Angular 6, как в моем файле 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/ СКС / _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;

Здесь я рассмотрел множество возможных решений, но большинство из них говорят о том, чтобы поставить функции перед переменными, что уже сделано, но ошибка все еще сохраняется.

Любая помощь с благодарностью.

Answer 1

Вы должны импортировать файл scss начальной загрузки из node_modules перед импортом переменных в файл src / styles.scss.

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

Answer 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";