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

user_2526275 0
Viewed 14836

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.

angular6 bootstrap-4
4 Answers

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...
user_10871310

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

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

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

You should import the bootstrap scss file from node_modules before importing variables in src/styles.scss file.

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