Gulp sass fails after beta 7 updated

Ionic Framework ionic-v3
1

I’ve updated an app from beta 6 to beta 7 and now get an issue when running gulp. I’ve tracked it down to gulp sass:

[18:10:07] Using gulpfile ~/Sites/app/gulpfile.js
[18:10:07] Starting 'sass'...
node_modules/ionic-angular/util/functions.scss
Error: 

         The value `` must be a color.
         If you are setting the value as a map make sure
         both the base and contrast are defined as colors.

         For example:

         $colors: (
           primary:    #327eff,
           secondary:  (base: #32db64, contrast: #000),
         );
        on line 80 of node_modules/ionic-angular/util/functions.scss
>>   @error "
   --^

[18:10:07] Finished 'sass' after 317 ms

I’ve tried to comment out each of my pages’ files in the SASS import to see if that fixes it, but it still occurs.

Has anyone come across this?

UPDATE: Removing the following from node_modules/ionic-angular/util/functions.scss allows SASS to build, but there’s obviously something causing this. I’ll look further to see if it’s something in my CSS throwing the error.

@function color-error($color-value) {
  @error "

  The value `#{$color-value}` must be a color.
  If you are setting the value as a map make sure
  both the base and contrast are defined as colors.

  For example:

  $colors: (
    primary:    #327eff,
    secondary:  (base: #32db64, contrast: #000),
  );";

  @return false;
}
2

Are you using the color function anywhere in your theme/ directory and if so are you importing globals.core in app.variables.scss?

@import 'globals.core';

If you are already doing this, can you compare your theme directory to the conference app to see if you notice any differences and/or paste the content of these files here? Thanks!

https://github.com/driftyco/ionic-conference-app/tree/master/app/theme

3

I am getting exactly the same error after updating from beta.11 to rc.2, any clues on how to debug this?

4

Are you missing any of the following colors from your $colors map?

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

If so, it is erroring because of this issue: https://github.com/driftyco/ionic/issues/8266

The above issue will be fixed in the next release and the error message improved. There is also a nightly version of the framework released that includes this fix:

npm install --save ionic-angular@nightly

If you have all of these $colors and you’re still getting the error, could you share a simple repository for me to take a look at? :slight_smile:

5

Your are right! I don’t have light in my $colors map, and it works after adding back it. Thank you :slight_smile: