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

[andrade1379]

Hello, I want to preface this by saying there is a ticket open on this error but only collaborators are allowed to comment on it. I just need to know if this is something that is currently in the works? or if someone can tell me if there is a work around for this or if it's something that I'm doing wrong.

Currently I am importing my custom variables over the bootstrap.scss file like so:

// Variables
@import 'config/variables';

// Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap';

This is my setup:

"bootstrap": "^4.0.0",
"laravel-mix": "^1.0"

Laravel Mix uses Webpack for those who don't know and from the looks of it uses the latest. What I am seeing happening when trying to run yarn run dev I get a series of errors.

ERROR in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/Users/me/project-com/SourceCode/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./assets/scss/app.scss
Module build failed:
$link-hover-color : darken($link-color, 15%);
                   ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
    assets/scss/config/_variables.scss:86, in function `darken`
    assets/scss/config/_variables.scss:86
      in /Users/me/project-com/SourceCode/assets/scss/config/_variables.scss (line 86, column 21)
 @ ./assets/scss/app.scss 4:14-254
 @ multi ./assets/js/app.js ./assets/scss/app.scss

ERROR in ./assets/scss/app.scss
Module build failed: ModuleBuildError: Module build failed:
$link-hover-color : darken($link-color, 15%);
                   ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
    assets/scss/config/_variables.scss:86, in function `darken`
    assets/scss/config/_variables.scss:86
      in /Users/me/project-com/SourceCode/assets/scss/config/_variables.scss (line 86, column 21)
    at runLoaders (/Users/me/project-com/SourceCode/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/me/project-com/SourceCode/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Users/me/project-com/SourceCode/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Users/me/project-com/SourceCode/node_modules/async/dist/async.js:2257:31)
    at Object.callback (/Users/me/project-com/SourceCode/node_modules/async/dist/async.js:958:16)
    at options.error (/Users/me/project-com/SourceCode/node_modules/node-sass/lib/index.js:294:32)
 @ ./assets/scss/app.scss
 @ multi ./assets/js/app.js ./assets/scss/app.scss

[XhmikosR]

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.

[LarryAzevedo]

Yeah, I'm getting the same error:

[andrade1379]

@XhmikosR Only difference in my _variables.scss file is the removal of default from the variables I want to customize.

Seems as though the mapping of `$link-color isn't being properly mapped to the actual color value and thus darken() is not seeing an actual color?

If this is truly an implementation issue then I will try on Stackoverflow but from what I'm seeing I've implemented this according to the official docs and still am getting these errors. Thanks!

[XhmikosR]

@andrade1379: we need more info to reproduce the issue. Please make a test repo and ping me.

[andrade1379]

@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

[XhmikosR]

Yes please do so.

On Jan 23, 2018 22:31, "Matt Andrade" [e-mail] wrote:

@XhmikosR https://github.com/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?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/25361#issuecomment-359920108,
or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAVVtV4SF9aSWxVyPiXkj9DwRsltH3w4ks5tNkGkgaJpZM4RjnTt
.

[SteamWind]

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]

Sorry, I didn't get a notification so I forgot about it.

From a quick look it shouldn't happen but I haven't tried the repo yet.

/CC @mdo for any ideas.

[SteamWind]

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.

[alireza4050]

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)

[SteamWind]

@alireza4050 Yes, you've got exactly the same chaining error so you reproduced the same bug. Do you use other libraries?

[JmRy]

@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

[browner12]

Also using Laravel Mix, and can confirm the issue. Will continue to debug and post results back here.

[andrade1379]

@JmRy I've also seen this workaround while researching this error. I might just implement this for the time being until an update is made so I can continue to work with v4.

[JmRy]

@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

[andrade1379]

@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/

[LarryAzevedo]

it clearly does not state that functions.scss needs to be inserted before variables.scss

@andrade1379 is right. It's not mentioned on http://getbootstrap.com/docs/4.0/getting-started/webpack/ nor on http://getbootstrap.com/docs/4.0/getting-started/theming/#importing

[JmRy]

@andrade1379 @LarryAzevedo Mmmmm .... I have be an heritic then!?

In fact, what's the purpose of this post? Discover, solve and use the new coding used by the V4 developers or demonstrate that they use a new technique not described in their doc.

In the next version it's the doc or code that will be updated ... Multiple choices exist ;-)

[LarryAzevedo]

@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?

[JmRy]

@LarryAzevedo That's right, the doc could be more explicit and i also broke my head about this mistake, but my approach is different.

Bootstrap developers are not broken arms. So in principle, if I can not activate a simple compilation code, then the problem comes from my understanding.

So if it does not work for me, and it works for them, first I look what they do. Then do not forget the 80/20 rule and be humble. Especially for an open source product

[LarryAzevedo]

People other than developers use Bootstrap.

[marcelmoreau]

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

[JmRy]

I just read this page https://getbootstrap.com/docs/4.0/getting-started/theming/

Conclusion, there is no error in the code or in the doc. Just a new theming system, different from the V3.

It also contains a very clear explanation for the $colors variables and this warning on section Importing :
_"In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins."_

Then

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

It was enough to read

Closing this post in solved would be good I think

[andrade1379]

@JmRy Hmmmm... So if I want to include all of BS then I need to import every single Sass file? That is the preferred option based on what you quoted.

Still doesn't seem very clean(optimal) approach. Either way it seems as though this isn't going to be addressed so whatever workaround works I guess. Thanks!

[JmRy]

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

[LarryAzevedo]

@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!

[LarryAzevedo]

You could go with Option A and just add @import "node_modules/bootstrap/scss/functions"; before @import "node_modules/bootstrap/scss/bootstrap

Like this:

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


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

But I'm not sure I like the idea of calling functions twice.

[JmRy]

@LarryAzevedo Sorry, but now it's me who does not understand your problem !?

I do not have any errors if I use method A or B.

We agree that the first lines of your custom look like this

Method A
/* First lines for your custom.scss */
@import "node_modules/bootstrap/scss/bootstrap";
/* Your  customizaton  */
$green: #339900;
$yellow: #fec20e;
$blue: #369;
.class {
 color: $green
}

Method B
/* First lines for your custom.scss */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
/* Your customizaton */
$green: #339900;
$yellow: #fec20e;
$blue: #369;
.class {
 color: $green
}

Which V4 version do you use? Alpha, Beta or master

Personally, I run with the latest versions of node and sass. I asked the V4 installation with _npm install bootstrap_ command. Also make regular updates of npm

In my opinion, if you have errors this comes from your config

[LarryAzevedo]

We agree that the first lines of your custom look like this

@JmRy Nope, I never said (or suggested) to do this:

@import "node_modules/bootstrap/scss/bootstrap";
/* Your  customizaton  */
$green: #339900;
$yellow: #fec20e;
$blue: #369;
.class {
 color: $green
}

Nor does the documentation so I don't understand how that code is relevant.

Also, to answer your question @JmRy, I'm using this version: https://github.com/twbs/bootstrap/archive/v4.0.0.zip

[JmRy]

@LarryAzevedo I installed your zip _(which is not the last version of the V4 on github)_ indicated in your message.

With node v8.9.4 + Sass 3.5.5 or Prepros 6.1.1

• Compiled bootstrap-4.0.0\scssbootstrap.scss -> no error
• Compiled custom.scss coded with method A -> no error
• Compiled custom.scss code with method B -> no error

I do not know why you have compilation errors. I can not bring you any help, sorry

[LarryAzevedo]

@JmRy Ok but what do you have in your custom.scss?

[adrianabreu]

I'm unable of making this work. In my case I'm using gulp-sass 3.1.0 and gulp 4.

I have tried both: Importing the modules or the whole bootstrap module.

@import './bootstrap/bootstrap'; // Doesn't work

@import "node_modules/bootstrap/scss/functions"; // Doesn't work
@import './bootstrap/bootstrap';

@import "node_modules/bootstrap/scss/functions"; // Doesn't work
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

I always get:

[1] Message:
[1]     node_modules\bootstrap\scss\_variables.scss
[1] Error: argument `$color` of `darken($color, $amount)` must be a color
[1]
[1]        Backtrace:
[1]             node_modules/bootstrap/scss/_variables.scss:152, in function `darken`
[1]             node_modules/bootstrap/scss/_variables.scss:152
[1]         on line 152 of node_modules/bootstrap/scss/_variables.scss
[1] >> $link-hover-color:          darken($link-color, 15%) !default;

Any help with this?

[wolfy1339]

In this case, it should work fine. The problem isn't with Bootstrap itself. I compile using Gulp 4 + Gulp sass + node-sass (so that I can always use the version bootstrap uses if the gulp plugin doesn't update)

[adrianabreu]

I found that there was a file excluded from the search that imported bootstrap variables, I added the bootstrap functions and it worked properly

[mdo]

Closing out since this should be long resolved.

[igasparetto]

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());
});

[heyflo]

I don't know why this has been closed or marked resolved. It is not.
I followed the doc : https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults

Included the variables I wanted to override before importing the entire bootstrap :
@import "~bootstrap/scss/bootstrap";

And it's crashing. It's pretty obvious it would crash because of these lines :

$link-color:                theme-color("primary") !default;
$link-hover-color:          darken($link-color, 15%) !default;

$link-hover-color uses $link-color which itself uses a bootstrap function. At that point the function doesn't exist so $link-color is not a color. This is what causes the crash.

Re-declaring the variables AFTER importing bootstrap does not work. So if you want to use re-declare variables before importing bootstrap, be sure to not include variables which are using functions.

[igasparetto]

@heyflo it was closed because it is not a bug in bootstrap but an issue with the way you are including the files.

As you correctly said, $link-hover-color uses $link-color which itself uses a bootstrap function.

You must include functions before variables!

[maxbethke]

I am having the same problem. @igasparetto
Even tho I included functions before variables

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

// my customization here

@import "bootstrap/scss/bootstrap";

[polliro]

I Solve this problem with download the Source files version 4.5

after incluye all files scss in youre this directories

bootstrap/mixins";
bootstrap/utilities";
bootstrap/vendor";
bootstrap/";

after customice youre template in

bootstrap.scss <-- add o remove modules
_variables.scss <-- Custom colors

[ignacio-gomez]

This works for me:
1) Create a file called "custom_variables" in the stylesheets folder (ie: stylesheets/custom_variable.scss)
2) Open bootstrap gem: (in the terminal: bundle open bootstrap)
3) Copy the content from "_variables.scss" onto "custom_variables" or grab it from here :(assets/stylesheets/bootstrap/_variables.scss)

4) In the file application.scss
4.1) Remove the line:
*= require_tree .
4.2)
import your stylesheets in this order

@import "bootstrap/functions";
@import "custom_variables";
@import "bootstrap";
@import "your-custom-css-file-here";