Cannot get variable from material theme in Angular 7

user_7784165 0
Viewed 3260

I have Angular 7.0.3 and I'm trying to get create scss variable with the primary color of my material theme

// src/styles/_variables.scss
@import "~@angular/material/theming";
@include mat-core();
$app-primary: mat-palette($mat-indigo);

but getting this error

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
            ^
      (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null)
 isn't a valid CSS value.
      in C:\code\front\angular\speakup\node_modules\@angular\material\_theming.scss (line 1268, column 14)

How can I solve this, or what additional info I need to provide you about my setup?

angular7 angular-material angular sass
1 Answers

Are you using your variable $app-primary somewhere as a CSS color value (e.g. color: $app-primary)?

In that case you need to use map_get() to extract an actual color value:

e.g. color: map_get($app-primary, 900) <- the second value is the hue, checkout a palette like $mat-indigo in @angular/material/_theming.scss for possible values

Also: You are calling mat-core() in _variable.scss. Which makes me think that you are likely calling mat-core() more than once. Don't do that! Checkout https://material.angular.io/guide/theming

user_32939240
Related