V4.beta Argument `$color` of `darken($color, $amount)` must be a color

I have update bootstrap to 4.0.0-beta, and i get this error while compiling: $link-hover-color: darken($link-color, 15%) !default; ^ Argument $color of darken($color, $amount) must be a color Backtrace: node_modules/bootstrap/scss/_variables.scss:168, in function darken node_modules/bootstrap/scss/_variables.scss:168

[myplaneticket]

@derkjn you need to import the functions scss before variables

[agentphoenix]

@maxkorz I was working on splitting out my styles and the vendor styles when this started happening. I couldn’t figure out for a while why it was suddenly complaining, but after following the stack trace carefully, I think I found the culprit.

My app.scss just pulls in the Bootstrap variables so I can use them in my own styles for the time being, so I had to make sure I was pulling the functions in first then my own stuff, like so:

@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
@import 'variables', 'data-table';

Then in my vendor stylesheet, I just pulled in Bootstrap like normal:

@import '~bootstrap/scss/bootstrap';
@import '~jquery-confirm/css/jquery-confirm';
@import '~croppie/croppie';