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

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 26 (5 by maintainers)

Most upvoted comments

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.

+16

kball on Dec 15, 2016

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

andreidmt on Jan 3, 2017

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

andycochran on Jan 4, 2017

@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

BartHuis on Feb 24, 2017

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

ghost on Dec 30, 2016