bootstrap: Darken function "must be a color" error V4

@andrade1379, @alireza4050 I had the same problem and error. I solved it like this:

1. Update sass compiler to 3.5.5 version
2. Insert on my code @import “…/bootstrap/scss/functions”; @import “…/bootstrap/scss/variables”;

theme-color() is a function

The problem lies in your app.css judging by the error message, so you are passing something wrong in the darken function.

Either way, for implementation help, you should ask on StackOverflow or something.

@JmRy I don’t understand what you’re trying to accomplish by just quoting that page because if you follow those exact directions, but call functions within the custom.scss file, it throws an error. That’s the problem!

@JmRy I can see how my last post could have been seen as someone just wanting to find a flaw in documentation just for the sake of it. That was not my intention. I found this post after pulling my hair out trying to understand why I was getting an error.

I know that for me, if there was documentation explaining that the _functions.scss file needs to come before the _variables.scss file, I would have been all set.

I know this may not be the ultimate solution but perhaps just for now, it should be mentioned in the docs. Then later… if someone finds a way to make the setup more intuitive, great!

What do you guys think?

Closing out since this should be long resolved.

People other than developers use Bootstrap.

@andrade1379 I use the latest V4. This is not a workaround. In my opinion it’s the solution.

The errors described in this post indicate that SASS compiles as a value of the functions _(theme-color, assert-ascending, etc…) encoded in the _functions.scss file.

So just place this file before the variables, as does the bootstrap.css file.

Look the last message in https://github.com/twbs/bootstrap/issues/23331

I found that the problem is not in bootstrap but in the way the task is set in my gulpfile.

gulp.task('sass', function () {
    return gulp.src('./scss/**/*.scss') // DON'T DO THIS!
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.stream());
});

You probably have one single sass file that includes the others, so:

gulp.task('sass', function () {
    return gulp.src('./scss/custom.scss')
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.stream());
});

@JmRy It may very well be a solution but in my opinion a temporary one. Reason I say that is in the official documentation it clearly does not state that functions.scss needs to be inserted before variables.scss.

You can read here: http://getbootstrap.com/docs/4.0/getting-started/webpack/

@andrade1379 Sincerely, it’s a shame that you did not read the page I quoted

Here is a new excerpt:

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Hoping that the documentation can be improved moving forward to reduce these errors.

Same issue here.

This error doesn’t occur with the 4.0.0-alpha.5 version. But as soon as I go for the 4.0.0 it pops again.

It work until alpha 6 where in scss/_variables.scss:194:

$link-color:            $brand-primary !default;

After that it’s changed to:

$link-color:                theme-color("primary") !default;

As @SteamWind said fixing it introduces another error:

Module build failed:
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
        ^
      No mixin named -assert-ascending

Backtrace:
        node_modules/bootstrap/scss/_variables.scss:176
      in ..../node_modules/bootstrap/scss/_variables.scss (line 176, column 10)

Any news? It seems that if I change the bootstrap $link-color in _variables.scss to a hardcoded color, it works but an other error occurs in the file, then an other… Like a file was missing but I tried to import different bootstrap files in different orders (before, after my customs…), the main bootstrap.scss, etc.

@XhmikosR I’ve gone ahead and created a repo for you to clone. I’ve also added a README to walk you through the steps to reproduce the errors. Would you like me to add the repos link here?

https://gitlab.com/TikaL13/BS4-Build-Error