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

10
votes

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.

4
bootstrap-4angular6
what is $color 's value? - rileyjsumner
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; - seguraMode
You should put the relevant parts of that file in your answer - rileyjsumner
Added those parts to my question. - seguraMode
on the code you use variable $link-color whereas the error message cites $color - are you using the proper variables? - rileyjsumner

4 Answers

12
votes

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...
9
votes

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";
1
votes

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

@import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables';
-3
votes

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