Build failed. The Broccoli Plugin: [BroccoliMergeTrees] failed with: Error: Build Canceled: Broccoli Builder ran into an error with SassCompiler plugin. 💥

[henrixapp]

After upgrading to alpha-20, I get the following error:

WARNING: Unknown `` in $colors. `("50": #e6f3eb, "100": #c1e0ce, "200": #97ccae, "300": #6db78d, "400": #4ea774, "500": #2f985c, "600": #2a9054, "700": #23854a, "800": #1d7b41, "900": #126a30, "A100": #a0ffbd, "A200": #6dff99, "A400": #3aff76, "A700": #20ff64, "contrast": #ffffff)`
Backtrace:
	tmp/sass_compiler-input_base_path-0QsBjLLM.tmp/app/styles/color-palette.scss:475, in function `color`
	tmp/sass_compiler-input_base_path-0QsBjLLM.tmp/app/styles/angular-material/components/checkbox/checkbox-theme.scss:11

cleaning up...
Build failed.
The Broccoli Plugin: [BroccoliMergeTrees] failed with:
Error: Build Canceled: Broccoli Builder ran into an error with SassCompiler plugin. 💥
at new BroccoliBuildError (frontend/node_modules/broccoli-builder/lib/broccoli-build-error.js:40:9)
    at /frontend/node_modules/broccoli-builder/lib/builder.js:168:19
    at tryCatch (frontend/node_modules/rsvp/dist/rsvp.js:539:12)
    at invokeCallback (frontend/node_modules/rsvp/dist/rsvp.js:554:13)
    at publish (frontend/node_modules/rsvp/dist/rsvp.js:522:7)
    at publishRejection (node_modules/rsvp/dist/rsvp.js:457:3)
    at flush (frontend/node_modules/rsvp/dist/rsvp.js:2414:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

This error does not occur under alpha-19.

[henrixapp]

Renaming/Removing my app.scss "solves" the problem, but leads to ugly styling

[miguelcobain]

@wmadden any idea on why this might be happening?

[BennyAlex]

maybe they added another color-value, eg 'A9999' or something like that?

[miguelcobain]

@henrixapp can you show us the customisations you're making to ember-paper in sass?

[henrixapp]

Of course, it is a railsproject hosted on github: https://github.com/FachschaftMathPhys/moozean/blob/master/frontend/app/styles/app.scss is the main scss file which is working fine with alpha-19

[Subtletree]

Here's a basic example that causes the error:

$off-yellow: (
    '50' : #fdfaed,
    '100' : #faf4d1,
    '200' : #f7ecb3,
    '300' : #f4e495,
    '400' : #f1df7e,
    '500' : #efd967,
    '600' : #edd55f,
    '700' : #ebcf54,
    '800' : #e8ca4a,
    '900' : #e4c039,
    'A100' : #ffffff,
    'A200' : #fffefb,
    'A400' : #fff3c8,
    'A700' : #ffedae,
    'contrast': #000000
) !default;

$primary: $off-yellow;

[wmadden]

Check the source of the checkbox stylesheet listed in the stack trace. There will be a template color expression there that's being incorrectly transformed by the angular sass filter.

The whole thing is horribly over complicated, but that's mostly due to the angular material source.

[miguelcobain]

This is fixed on master. Note that the whole contrast story is much better now.
The example sass should look like:

$off-yellow: (
    '50' : #fdfaed,
    '100' : #faf4d1,
    '200' : #f7ecb3,
    '300' : #f4e495,
    '400' : #f1df7e,
    '500' : #efd967,
    '600' : #edd55f,
    '700' : #ebcf54,
    '800' : #e8ca4a,
    '900' : #e4c039,
    'A100' : #ffffff,
    'A200' : #fffefb,
    'A400' : #fff3c8,
    'A700' : #ffedae,
    'contrastDefaultColor': #000000
) !default;

$primary: $off-yellow;

Although the material spec doesn't recommend using #000000 ever. A safer bet would be to use $dark-contrast-color which is rgba(0, 0, 0, 0.87) by default.
A palette now can specify which contrasts apply to each color. Example of a built-in palette:

$color-brown: (
  '50': #efebe9,
  '100': #d7ccc8,
  '200': #bcaaa4,
  '300': #a1887f,
  '400': #8d6e63,
  '500': #795548,
  '600': #6d4c41,
  '700': #5d4037,
  '800': #4e342e,
  '900': #3e2723,
  'A100': #d7ccc8,
  'A200': #bcaaa4,
  'A400': #8d6e63,
  'A700': #5d4037,
  'contrastDefaultColor': $light-contrast-color,
  'contrastDarkColors': ('50', '100', '200', 'A100', 'A200'),
  'contrastStrongLightColors': ('300', '400')
) !default;