Accessing primary color which is defined custom theme inside component's scss

I have defined a custom theme in angular 4 and want to use this in one of my component's scss file

Basically I want background of specific mat-grid-tile to be primary color

Below is my custom theme

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent: mat-palette($mat-orange, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);


Below is code of my component's scss where i am trying to access this

@import '/src/styles.css';


:host { // host targets selector: 'home'

display: block;
left: 0;

width: 100%;


height: 100%;
}

.selected {
background: map-get($candy-app-theme,primary);
color:"white";
}


Compilation is failing static error that variable "$candy-app-theme" is not defined, but it is defined in styles.scss

I have just started Angular 4, hence i'm very unclear about it. Please let me know if any further code is required

Note: path from /src/styles.scss and '../../../styles.scss' both resolves correctly but none of them resolves variable

Continue reading...