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

@derkjn you need to import the functions scss before variables

@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';

I got it working with Webpack 3 and Angular by using:

@import "~bootstrap/scss/bootstrap";

at the top of my main app.scss and then anytime i import the variables file I do like this:

@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/variables";

This got rid of the errors but I don’t remember having to do this with alpha 6

Having exact same issue as @derkjn. Trying to compile bootstrap.scss and getting the same error, even though _functions.scss is the first import in that file.

To resolve, I had to import _functions.scss BEFORE bootstrap.scss.

Not sure if this is an issue with compiler (gulp-sass) or with bootstrap.

@import "bootstrap/scss/functions";  // Bootstrap Functions
@import "bootstrap/scss/bootstrap";  // Bootstrap

Got the same issue. Don’t understand why issue is closed if it still actual???

I’m still stuck on this. I’m not importing anything of my own. My main.scss is just:

@import "~bootstrap/scss/bootstrap";

and I still get

Module build failed: 
    $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
          in /Users/ignitestudio1/Sites/wp_test/web/app/themes/ignitetheme/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)

Any help is greatly appreciated!

@eness just make sure you import functions before variables in every place where you import variables

still having the same issue. I miss the days everything was just awesome …

Be sure to check the bootstrap version! bootstrap@4.0.0-beta.2 works like a charm.

My bad, I was compiling two .scss files with Gulp 🤦‍♂️ . The replica of _bootstrap.scss and another one wich use _variables.scss too. @derkjn check in you gulpfile.js that your are not compiling another file.

Back to actually compiling, so that’s a plus. Now I’m just trying to figure out the best way to handle responsive stuff after they removed all the responsive helpers in beta1…

We still have them all, they’re just different class names. Instead of .hidden-xs-up, use d-none, etc. And yes, you’ll need the _functions.scss file.