Bootstrap: v4 - Error: $color: 'theme-color("primary")' is not a color for `darken'

[sjdeere]

i have switch to v4 instead of the alphav6

npm install [email protected]

and when i compile i get

Error: $color: 'theme-color("primary")' is not a color for `darken'
on line 168 of sass/bootstrap/_variables.scss

[simonurmi]

(Could rename this issue to be more descriptive, found this by accident)

I'm encountering this as well. Works with map-get($theme-colors, "primary").

Another error I'm facing is "Error: no mixin named -assert-ascending". Seems like an issue with Sass not differentiating between hyphen and underscore.

Using node-sass with gulp-sass to build. Is there a dependency we're missing?

[sjdeere]

if you use a custom override .. make sure its below functions";

@import "bootstrap/functions";
@import "bootstrap/custom";
@import "bootstrap/variables";

i think thats what i did wrong. i was doing
@import "bootstrap/custom";
@import "bootstrap/functions";
@import "bootstrap/variables";

[iantbarker]

@sjdeere Including the functions file fixed that error for me.

Now getting another error:

Error: node_modules/bootstrap/scss/_forms.scss
Error: argument `$color` of `rgba($color, $alpha)` must be a color

       Backtrace:
        node_modules/bootstrap/scss/_forms.scss:280, in function `rgba`
        node_modules/bootstrap/scss/_forms.scss:280
        on line 280 of node_modules/bootstrap/scss/_forms.scss
>>   background-color: rgba($form-feedback-invalid-color,.8);

[sjdeere]

i always copy my stuff out of the node_modules folders myself .. but mine at least compiles now with nothing but bootstrap.

[sesser]

+1

Not to mention removing $brand-<color> and $gray-* variables between alpha6 and beta. Am I missing something here? Upgrade path from alpha to beta shouldn't be this painful.

[mdo]

Lots of breaking changes from latest alpha to beta, as was to be expected and was the main reason for constantly holding off on pushing a beta.

Include the _functions.scss file if you haven't yet and you'll be good to go.

[iantbarker]

@mdo I had to change this (line 166 in _variables.scss):
$link-color: theme-color("primary") !default;

to an actual hex code color. It didn't seem to be passing on the theme-color function?

[iantbarker]

@mdo Never mind. My bad. Needed to add functions file to a second file due to my setup :-(

[Ayobamideleope]

@iantbarker I'm have the same issue 'Error: node_modules/bootstrap/scss/_forms.scss
Error: argument $color of rgba($color, $alpha) must be a color'
and I have included functions in both my custom _variables.scss and app.scss

[Ayobamideleope]

@iantbarker I'm sorry, my bad as well, my custom _variables.scss contained a $font-size which was in px

[SivaPrasanna45]

  Undefined variable: "$background-color".
  in E:\working-repo\ng-commercial-aarive\commercial-aarive\ng-client\src\app\app.component.scss (line 23, column 21)

Error:
undefined

This is the error i am getting , when i did update from bootstrapv3 to v4.

[crobinson42]

Fix

All these issues can be resolved with @import "bootstrap/scss/bootstrap"; at the top of your .scss file.

[B-Prod]

@crobinson42 Actually this is not a fix, as the purpose is to override the Bootstrap variables and probably ignore some components.

So the order of the includes is important, as shown by the @sjdeere issue.

But the issue encountered by @iantbarker with the form related mixin is caused by missing colors definitions in the $theme-colors map.

There is 3 required keys for this map, that are:

• primary,
• success
• danger

Without one of them, the compilation will fail. I didn't find any mention of this in the Bootstrap documentation, but I may have missed it.

[mdo]

@B-Prod That's a good point—please open a new issue so I can track that and add something to the docs to explain changed map values and variables re-using them.