angular material theming: consume the theme definition object in another scss file

Question

I am coding in Angular 4.3.6 using @angular/[email protected]

Angular Material Document says

If you want to consume the theme definition object (e.g., $candy-app-theme) in other SCSS files, then the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins.

How do I archive it? To be specific, I have the following in my top level scss:

@import '~@angular/material/theming';
// Include non-theme styles for core.
@include mat-core();
$primary: mat-palette($mat-indigo, 400, 100, 900);

how do I make $primary available in other scss files?

In the past, I @include mat-core() everywhere. It is just recenlty that I noticed that

This should only be included once in your application.

What should be done so that I can map-get($primary) in other scss files?

Answer 1

I found the answer by trial.

Just follow the instructions to the letter and do nothing else: do not @include the mat-core() at any other location other than the topmost scss.

You are allowed to @import the ~@angular/material/theming multiple times. In each scss script you need mat-palette or $mat-indigo, @import it again.

// on other scss other than the root one, @import as usual
@import '~@angular/material/theming';
// @include mat-core(); but don't @include this again
$primary: mat-palette($mat-indigo, 400, 100, 900);