Foundation-sites: foundation-everything mixin failing to build with webpack sass loader in 6.3

[ThrowsException]

using the foundation-everything mixin gives me this error when compiling with webpack.

ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./htdocs/sass/default.scss
Module build failed:
undefined
^
Argument $color of red($color) must be a color

Backtrace:
node_modules/foundation-sites/scss/util/_color.scss:19, in function red
node_modules/foundation-sites/scss/util/_color.scss:19, in function color-luminance
node_modules/foundation-sites/scss/util/_color.scss:44, in function color-contrast
node_modules/foundation-sites/scss/util/_color.scss:63, in function color-pick-contrast
node_modules/foundation-sites/scss/components/_badge.scss:59, in mixin foundation-badge
node_modules/foundation-sites/scss/foundation.scss:84, in mixin foundation-everything
stdin:4
in node_modules\foundation-sites\scss\util_color.scss (line 19, column 10)
@ ./htdocs/sass/default.scss 4:14-144

[kball]

If you're updating an existing project, you'll need to update your _settings.scss file... I believe the issue you're seeing here is the lack of the new $badge-palette variable.

[ThrowsException]

Thank you.

[alejopj]

Still now working for me. $badge-palette variable was already in place and I still have the same issue. Even after a clean installation of all the bower components I need. Anyone else? Thank you in advance.

We had to move back to 6.2.4 until this is really solved.

EDIT: Just in case it helps:

@ ./src/scss/foundation.js 3:0-43./src/scss/app.scss
Module build failed: ModuleBuildError: Module build failed:
undefined
^
Argument $color of red($color) must be a color

Backtrace:
bower_components/foundation-sites/scss/util/_color.scss:19, in function red
bower_components/foundation-sites/scss/util/_color.scss:19, in function color-luminance
bower_components/foundation-sites/scss/util/_color.scss:44, in function color-contrast
bower_components/foundation-sites/scss/util/_color.scss:63, in function color-pick-contrast
bower_components/foundation-sites/scss/components/_badge.scss:59, in mixin foundation-badge
stdin:18
in ...\bower_components\foundation-sites\scss\util_color.scss (line 19, column 10)

[ncoden]

Hi @alejopj,

Is your $badge-palette variable like this: $badge-palette: $foundation-palette; ?
Also, can you provide the result of @debug $color; at scss/components/_badge.scss:57 ?

[alejopj]

Hi @ncoden,

About the first question, yep, it was (before reverting to 6.2.4).
About the second one, give me until EOW, as we are on a freeze for a production deployment on Thursday and we are also short of time. I'll try to make all the front-end team to try to update again and check also the badge component. Ping me again if I forget it please. Thanks!

[jackaldridge]

The $label_palette variable in _settings.scss must also be set.

[ncoden]

poke @alejopj

[andreidmt]

I was getting the same error but from what I see inside the _badge.scss you already have $badge-palette: $foundation-palette !default;, also for $label_palette in _label.scss.

I updated from foundation-sites 6.2.4 to 6.3.0 and in my custom settings file I had:

// 9. Badge
// --------
$badge-background: $primary-color;
$badge-color: foreground($badge-background);
...

Apparently the foreground mixin is no longer defined (at least I couldn’t find it) and the value "foreground($badge-background)" was passed to the other mixins that ultimately ended up in red()

I fixed it by commenting the $badge-color line. The same applies for the $label-color.

Was getting the same logs as @alejopj so I think it's the same fix. Figured it out by adding a @debug inside the color-luminance function in _color.scss.

Hope this helps

[andycochran]

As of 6.3, foreground() has been replace by color-pick-contrast().

[alejopj]

Me poked @ncoden, thanks. Sorry I went on vacations and totally forgot about it. Sadly I have to say I don't work for the same company since yesterday, so I will not able to help with this, as I have no access to the code any more.

Btw, let me ping the front-end guys so they can continue from here. Guys (@anxolin), could you please help @ncoden with this? It's about debugging the problem we had updating from Foundation 6.2.4 to the last stable version. As you can see, it is a very well known problem, but they need some help to find the cause. Thank you in advance.

[anxolin]

No worries @alejopj , we'll take a look into it!

@ncoden, tomorrow we are updating Foundation to check if it's still happening.
Thanks for your help!

[dasanra]

Hi, @alejopj team talking

Thank you @ncoden for your interest and help and thank you @andycochran, it was an issue with a foreground() in our custom _settings.scss

We updated our _settings.scss to meet all the requeriments for foundation-sites 6.3.0 and compilation works again

Thank you for your help

[BartHuis]

@ncoden I downloaded the most recent version with the settings untouched, only copied to an own folder. getting the following too:
``` error in ./resources/projectname/assets/sass/app.scss

Module build failed:
$rgba: red($color), green($color), blue($color);
^
Argument $color of red($color) must be a color

Backtrace:
node_modules/foundation-sites/scss/util/_color.scss:19, in function red
node_modules/foundation-sites/scss/util/_color.scss:19, in function color-luminance
node_modules/foundation-sites/scss/util/_color.scss:44, in function color-contrast
node_modules/foundation-sites/scss/util/_color.scss:63, in function color-pick-contrast
node_modules/foundation-sites/scss/components/_badge.scss:59, in mixin foundation-badge
node_modules/foundation-sites/scss/foundation.scss:84, in mixin foundation-everything
stdin:10
in /home/vagrant/Code/projectname/node_modules/foundation-sites/scss/util/_color.scss (line 19, column 10)

@ ./resources/projectname/assets/sass/app.scss 4:14-248
@ multi ./resources/projectname/assets/js/app.js ./resources/projectname/assets/sass/app.scss
```

looks like there's something wrong with some color settings. tried to debug where it's coming from, but couldn't debug well becoupe npm clears the screen when an error appears so i cant read the warnings i'm generating to output all the colors in the scss functions to dubug them.

edit: downgrading to 6.2.4 works for me, but would be nice if newer would be fixed

[BartHuis]

@ncoden When using the CLI and using the files that produces, it works. zo i think there's something wrong with the npm installed version? i copied the settings file from the vendor folder as explained in: https://laracasts.com/discuss/channels/elixir/zurb-foundation-6-and-laravel-53/replies/190310

[dasanra]

@BartHuis In our case the problem was that we used some Foundation 6.2 files as base configuration (like the _settings.scss and the app.scss)
So if any of them use some deprecated methods, like foreground() in our case, it will throw an error like the one you are having.
So I think you should look in your custom .scss if you are still using any deprecated function and you should update it to the new methods provided by Foundation 6.3

Hope it helps!

[BartHuis]

@dasanra no, totaly fresh copy of all 6.3 files

[palaniichukdmytro]

how to use last version 6.2.4 in bower, after updation all media queries are not working well. How can I use 6.2.4 version insead?

[pratik-trianz]

I am facing the same issue. i am on latest "foundation-sites": "^6.4.1" tried to downgrade to 6.2.4 but still no success

[mikemorris46]

I still have this problem in 6.4.1 too. Did npm install of foundation-sites.

[dasanra]

@pratik-trianz if you are using a custom app.scss based in Foundation app.scss you have to update it. It may be using deprecated functions of older foundation-sites version.

@mikemorris46 this could also be your problem

[pratik-trianz]

Thanks @dasanra
Here are the contents of my app.scss file

@import "base/variables"; // foundation @import "base/foundation-settings"; @import "foundation"; @include foundation-everything; // Components @import "components/container"; @import "components/todo";

container.scss

`
.container {
background: $light-grey;
border: 1px solid $light-grey-border;
border-radius: 5px;
padding: 0;
margin-bottom: 2rem;
}
.container__header {
border-bottom: 1px solid $light-grey-border;
padding: 1rem;
label {
cursor: pointer;
font-size: 1rem;
}

:last-child {
align-items: center;
display: flex;
}
}
.container__message {
color: $light-color;
margin: 2rem auto;
text-align: center;
}
.container__footer {
border-top: 1px solid $light-grey-border;
padding: 1rem 1rem 0 1rem;
}
`

todo.scss

`
.todo {
align-items: center;
cursor: pointer;
display: flex;
padding: 1rem;
transition: background .3s ease;
p, input {
margin: 0;
}

:first-child {
margin-right: 1rem;
}
&:hover {
background: #f0f0f0;
}
}
.todo__subtext {
color: #999;
}
.todo-completed {
p, .todo-subtext {
color: $light-color;
text-decoration: line-through;
}
}
`

Can help me to update old syntax

[dasanra]

@pratik-trianz Can`t see anything wrong in that, it can be difficult to debug because foundation gives so little info.

Problem can be also in @import files. Remove some of them and check if problem persists in order to find which file has errors.

[kball]

Sorry for the challenges @pratik-trianz - we're trying to get better at preventing this type of upgrade problem.

To hunt this down, I'd look in base/variables and base/foundation-settings- based on the early issue filers the most likely culprit is a missing $badge-palette variable... if your base/foundation-settings file is a version of the _settings.scss that the framework ships, I'd do a comparison between that settings file and the defaults shipped in 6.4.1

[mikemorris46]

Found my problem seemed to be with the order of imports. Had import of foundation and include of foundation-everything after my customized imports. Moving them to the top has fixed the issue for me.