Theme does not work with igx-css-vars in version 8

[lalo-mx]

Description

Theme does not work with igx-css-vars in version 8

• igniteui-angular version: 8.0.0
• browser: NA

Steps to reproduce

1. Download sample sample-igniteui-angular-8.zip
2. Run npm install
3. Run npm run build

Result

The build shows an error {value} isn't a valid CSS value.

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                   ^
      (50: #52a6ff, 100: #3f96f4, 200: #1475dc, 300: #0c5db3, 400: #0550a0, 500: 
#004691, 600: #003977, 700: #003064, 800: #002750, 900: #001c3a, "A100": #006fe6, "A200": #0059b8, "A400": #003c7d, "A700": #001d3c) isn't a valid CSS value.     
    ╷
216 │             --#{$prefix}-#{$key}: #{$value};
    │                                     ^^^^^^

Expected result

The build completes without errors

Attachments

sample-igniteui-angular-8.zip
build.log

[simeonoff]

@lalo-mx I will investigate. In the meantime, you can try installing node-sass as a dependency. Let me know if it fixes the issue for you.

[simeonoff]

@lalo-mx To get css variables produced from a palette, there is another mixin called igx-palette-vars. igx-css-vars should only be used with maps produced from a *-theme function.

Btw, I have updated your example with some inline comments to show how you can use both mixins:
sample-igniteui-angular-8-enhanced.zip

[lalo-mx]

@simeonoff Both solutions worked. I could not find why igx-css-vars was used in that way but i am confident that was from a sample. Was the signature of the method changed recently?

[simeonoff]

@lalo-mx No, not for the igx-css-vars mixin. I have changed the igx-palette-vars mixin with the pull request. It should get reflected in the documentation soon. What was that sample built with?

[lalo-mx]

@simeonoff It was with igniteui-angular 7.3.3 and Angular 7.2.15. It is fixed now.