Argument `$color` of `darken($color, $amount)` must be a color Bootstrap 4 Angular 6

Question

Attempting to use Bootstrap 4 a la carte in my Angular 6 app like so in my angular.json file...

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

Which yields this error in the terminal after sass load attempt is made...

ERROR in ./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) Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined ^ Argument $color of darken($color, $amount) must be a color

This is the line in question in _variables.scss: $link-hover-color: darken($link-color, 15%) !default;

Two lines above it's declared: $link-color: theme-color("primary") !default;

I've looked through many possible solutions on here but most of them say to put functions before vars which is already done yet the error still persists.

Any help greatly appreciated.

Answer 1

I hit this issue. All that was required was to import functions before my other imports:

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

Answer 2

In the new version, You have to import bootstrap variables as follows.

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

Answer 3

Can you move those imports into your "src/styles.scss" file?

// src/styles.scss

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