Vue-material: Theme configuration broken after update to node-sass 4.8

[NatalieMac]

Steps to reproduce

Updated from node-sass 4.5.3 to 4.8.3

Which browser?

Chrome, possibly others

What is expected?

No change in how themes are applied

What is actually happening?

Theme seems to be broken, specifically for background colors. Processed CSS with node-sass 4.8.3:

.md-button.md-theme-default.md-primary {
    color: #1a237e;
    color: var(--md-theme-default-primary-on-background, #1a237e);
}

Reverting to node-sass 4.5.3 corrects the problem.

[VdustR]

This is seems a node-sass or libsass issue.
whereas <= 4.7.2 got --md-theme-demo-light-primary: #448aff;,
>= 4.8.1 got --md-theme-demo-light-primary: $value;.
Changing the code to --md-theme-#{$name}-#{$type}: #{$value} fixes it.

It's better to downgrade your node-sass to ^4.7.2 for now. I'll report this issue to node-sass.

[jacksonrdlc]

Theming seems to be messed up even with node-sass: ^4.7.2 . I am running a brand new vue init vuematerial/webpack my-app and theme configuration doesn't seem to be working out of the box.

I am running Chrome on a Mac. Have also tried in Safari and Firefox.

BUT as you stated, the code change --md-theme-#{$name}-#{$type}: #{$value} does fix it with some linting issues.

[vovkats]

I have the same issue

[talkdirty]

@jacksonrdlc node-sass: ^4.7.2 will update you back to 4.8.3, due to the caret operator. You can verify this with npx node-sass --version. I suggest you put "node-sass": "4.7.2" in your devDependencies until the fix is released.