SassError: $color: null is not a color

[mikaeldiener]

What happens?

Upgraded to the latest (6.7.0) npm package, and I get the following error when compiling my scss:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
╷
176 │ $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
styles_settings.scss 176:22 @import

[DontFretBrett]

Our team had the same issue. Also with scale-color. When we hard coded package to "6.6.3" our build was fixed again.

[joeworkman]

Can you please give me details on how to replicate this? v6.7.0 builds fine for me.

[DontFretBrett]

Can you please give me details on how to replicate this? v6.7.0 builds fine for me.

I wouldn't know how to repro from scratch but with our code base, after updating to 6.7.0, scale-color was no longer accepting a variable for argument $color. When I put hex color values that resolved that particular function but then it complained about another function error 0: argument $color of rgba($color, $alpha) must be a color.

So I had to change things like
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
to
$anchor-color-hover: scale-color(#003b71, $lightness: -14%);

I know the response could be, well fix your code base, but it works fine with 6.6.3. And that is in _foundation-setting.scss which at the top says

// DO NOT EDIT THIS FILE - USE theme.scss to override variables instead

[mikaeldiener]

Our webpack pipeline also worked perfectly with v6.6.3. Except for the obsolete dart sass errors.

Details about our webpack setup:
sass: 1.29.0
sass-loader: 12.1.0
webpack: 5.42.1
mini-css-extract-plugin: 1.3.1

[joeworkman]

Do you have @include add-foundation-colors; in your settings file?

[joeworkman]

Please compare your settings file with the one that ships with Foundation.

[mikaeldiener]

I´ve compared and fixed two changes in the settings file. Now it's identical. However, now my build does not work at all. It hangs without any output. I´ve tested to revert to 6.6.3, and the same build setup works perfectly (except for the obsolete dart sass warnings).

[soniCaH]

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
   ╷
31 │   $rgba: red($color), green($color), blue($color);
   │          ^^^^^^^^^^^
   ╵
  node_modules/foundation-sites/scss/util/_color.scss 31:10        color-luminance()
  node_modules/foundation-sites/scss/util/_color.scss 55:16        color-contrast()
  node_modules/foundation-sites/scss/util/_color.scss 76:14        color-pick-contrast()
  node_modules/foundation-sites/scss/components/_tabs.scss 169:14  foundation-tabs()
  node_modules/foundation-sites/scss/foundation.scss 134:3         foundation-everything()
  src/styles/global.scss 36:1                                      root stylesheet

Similar issues, @include add-foundation-colors; is included. Was broken when trying to update from 6.6.3 to 6.7.1

[joeworkman]

Does the default 6.7.1 build compile for you? If you replace the default settings file with your own, does it work?

[soniCaH]

Yes it does (6.7.2 in the meantime), with my _settings.scss does run the basic template.

[kgrammer]

I was just hit with this error tonight. I had updated my site's resources a couple of days ago, but just tonight rebuilt the CSS files and ran into the "Error: $color: null is not a color" error. I do have @include add-foundation-colors; in my settings file.

I tried 6.7.0, 6.7.1 and 6.7.2 and all three failed with the same error.

I reverted back to 6.6.3 and that works (as expected).

Any idea what's going on?

[joeworkman]

In order to help, I need to be able to replicate the issue. No one has been able to provide me with anything that will allow me to replicate this.

[kgrammer]

I can send you my SCSS files that you can compile with 6.7.2 if that will help.

Where do you want me to send them?

[joeworkman]

If they are not private, you can pop a download link here... Else you can send them to joe@get.foundation

[kgrammer]

Joe, I emailed you my CSS files last night. Hopefully they will demonstrate the error for you.

[joeworkman]

Got it. Thank you. I may not be able to get to this until next week.

[joeworkman]

Sadly I could not get this to work. this was just a small part of your build. If you can give me a clean example that I can run to replicate the errors, that would be appreciated.

[kgrammer]

I thought I sent you everything you needed (except for the base foundation files of course).
I'll look at the zip file again...
Meanwhile, did you get an indication of what I left out?

[joeworkman]

I am pretty sure we figure it out.

[joeworkman]

I also open an issue for this now... #12278

[katzmo]

For me this issue is caused by those new lines in "foundation-sites/scss/util/_color.scss" (see #12080):

////
/// Patch to fix issue #12080

$primary-color: null;
$secondary-color: null;
$warning-color: null;
$alert-color: null;
$success-color:null;
////

I import "foundation-sites/scss/util/color" in files loaded after my "settings.scss" and "foundation-sites/scss/global" (which also includes add-foundation-colors). Now the import overrides my colors and sets them all to null.

This could probably be fixed by changing null to null !default.

[joeworkman]

Why are you importing util/color on it's own after the settings? The settings already import all of the util libraries.

[joeworkman]

Regardless of that question, thank you for locating this. I agree that default should fix it.

[joeworkman]

6.7.3 has been released. I hope that it helps solve issues talked about here...

https://github.com/foundation/foundation-sites/releases/tag/v6.7.3

[katzmo]

Wow, that was quick! Thank you!!

[kgrammer]

Been meaning to jump on and report that 6.7.3 did indeed resolve the issue for us.

Thanks!