.SASS issues with @angular/material new update.

[briosheje]

I have a project build over this repository in my macbook, tried to bring it to my windows machine but had a tons of issues to solve.

The first one was webpack-related (though there is another issue opened already), after resolving that one, however, I had an extra issue thrown from the .scss file, the issue was about app.theme.scss.

In the new Angular/Material version, in fact, most of the tags were replaced and some styles were overwritten.

I had to change:

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

//Here the existing theme is being redfined
$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

// This is where you define your custom them

// md-palette takes, color, default, lighter and darker params
.m2app-dark {
  $dark-primary: md-palette($md-cyan, 700, 500, 900);
  $dark-accent:  md-palette($md-yellow, A200, A100, A400);
  $dark-warn:    md-palette($md-amber, A200, A100, A400);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

To:

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include mat-core();

//Here the existing theme is being redfined
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

// This is where you define your custom them

// mat-palette takes, color, default, lighter and darker params
.m2app-dark {
  $dark-primary: mat-palette($mat-cyan, 700, 500, 900);
  $dark-accent:  mat-palette($mat-yellow, A200, A100, A400);
  $dark-warn:    mat-palette($mat-amber, A200, A100, A400);

  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

I didn't update the angular/material manually, I've just copied & pasted the working code from my mac to my pc, run npm install and had the issue, so might be useful if someone else has troubles with it.

[joaogarin]

Hello,

Thanks for pointing it out. Will try to sort this out today or in the next days. Will keep this issue updated.

[joaogarin]

Hello, fixed in https://github.com/joaogarin/angular2-electron/commit/64dd7cc5df8e1a78853ac4d3403942b6199ca644