Compile error: $color` of `darken($color, $amount)` must be a color

[LucyI]

This is about Bulma.

Might be a bug, but I definitely need help.

Overview of the problem

This is about the Bulma CSS framework Experiencing this issue with Bulma version 0.4.2 AND version 0.6.0 Compile errors with Node-Sass version 3.4.2?

Description

Error when trying to compile either of the above Bulma versions.

Error: bulma\base_helpers.sass Error: argument $color of darken($color, $amount) must be a color Backtrace: bulma/base/_helpers.sass:99, in function darken bulma/base/_helpers.sass:99 on line 99 of bulma/base/_helpers.sass color: darken($color, 10%) !important;

I have found this same error mentioned on other Bulma as well as Bootstrap forums -- but no one seems to have an actual solution to the problem.

Steps to Reproduce

1. Download Bulma zip file to local machine from repo
2. Try to compile out of the box files using Gulp and node-sass (libsass?)
3. Receive the above error
4. If the _helpers partial import is commented out, then the error is thrown on the next partial that uses the $color variable.

Note: Until today, I could compile Bulma 0.4.2 successfully on Codepen, which uses Sass (Ruby, I think) version 3.4.22. But now I get compile errors on Codepen with both Bulma 0.4.2 and 0.6.0.

[jgthms]

It must be an issue with your compiler. Do you customise $colors at all?

[LucyI]

I do customize colors, but also encountered this error with a strait out of the box zip of Bulma with no customization done yet.

Also - not able to compile Bulma on Codepen either. Codepen doesn't seem to expose error messages, so I'm not certain what the problem is there, but it is choking on the same partials that throw this $color error on my local machine. Will investigate further and have better info for you later today.

[LucyI]

Here is a Codepen project that is not able to compile Bulma. It is just the straight Bulma Sass files plus an index page. No customization. https://codepen.io/followingsea/project/editor/XxKyeG

[jimblue]

Same probleme here.

[LucyI]

@jimblue In which versions of Bulma and Sass are you experiencing this same behavior? I'm hoping to narrow this down to get a working set-up...

[jimblue]

@LucyI, I'm using Bulma version 0.6.0 and Sass version 3.5.2.

[ptcampbell]

I'm also having the same trouble.

[LucyI]

@PTcampbell Which versions of Bulma and Sass are you using?

[ptcampbell]

Bulma 0.6.1 and SASS 3.1 (via gulp-sass) although this seems to have fixed it

[LucyI]

Thanks. I think I had tried everything suggested in that thread with no luck. Can you say which part exactly seems to have fixed this for you?

[ptcampbell]

@LucyI did you have any luck?

@import "../node_modules/bulma/sass/utilities/initial-variables"
@import "../node_modules/bulma/sass/utilities/functions"

// variable tings…

@import "../node_modules/bulma/bulma"

[Nainterceptor]

Hello,

I like the idea of importing only parts of bulma what I want, and I think one of the best parts of Bulma is that modular design

I've solved this issue, you just have to import functions before derived-variables, order is important because derived-variables use functions.

Not working

@import "~bulma/sass/utilities/initial-variables.sass"
@import "~bulma/sass/utilities/derived-variables.sass"
@import "~bulma/sass/utilities/functions.sass"

Working

@import "~bulma/sass/utilities/initial-variables.sass"
@import "~bulma/sass/utilities/functions.sass"
@import "~bulma/sass/utilities/derived-variables.sass"

I think this issue is solved ;) Have a nice day

[LucyI]

The order you have in your Working example is the way I have all my Bulma projects set up, and I believe is the Bulma order of imports out of the box, so this is not a solution for me...

[dgriego]

@LucyI have you found a solution for this?

I discovered the same issue, tried all of the suggested fixes but nothing is working for me.. my issue comes up in button.sass:134

ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-28175bb7","scoped":false,"hasInlineConfig":true}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./client/App.vue
Module build failed:
          background-color: darken($color-invert, 5%)
                           ^
      Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
    node_modules/bulma/sass/elements/button.sass:134, in function `darken`
    node_modules/bulma/sass/elements/button.sass:134

when I debug that line this is the output for the variable $colors:

(white: white, #0a0a0a, black: #0a0a0a, white, light: whitesmoke, #363636, dark: #363636, whitesmoke, primary: #00d1b2, findColorInvert(#00d1b2), info: #3273dc, findColorInvert(#3273dc), success: #23d160, findColorInvert(#23d160), warning: #ffdd57, findColorInvert(#ffdd57), danger: #ff3860, findColorInvert(#ff3860))

[LucyI]

@dgriego No luck unfortunately. I have even tried the .scss fork of Bulma 6.2, but get the same error. I have played around with the order of the imports, trying functions before initial variables, etc., but nothing has worked. I'm pretty much giving up on Bulma for the time being. I have read that other sass frameworks (Bootstrap 4 even) have encountered this same error and one person wrote that it is a newer version of Libsass that's causing the issue. So I suppose I could try rolling back my Libsass...

[augnustin]

Same issue here, all workarounds also failed. :weary: I am javascript-fatigued ...

[augnustin]

Also, I just tried to manually import the whole code into my own code base (without node_module) and I get the same error FYI.

Using:

    "sass-loader": "^7.0.1",
    "node-sass": "^4.9.0",
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "bulma": "^0.7.1",

[augnustin]

Found it!!!!

I was loading a variable before the @import '~bulma/bulma' which sets: $border: 1px solid $light-grey;.

For those who'll need to debug this, I used the very useful @debug $border; motion, and found it was set before any bulma file.

But shouldn't variable get prefixed eventually?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.