title: How to apply angular-material built in theme variables in component style?
body: <p>I wanted to create a dynamic <code>background-color</code> for my <code>.active</code> class of my <code>mat-list-item</code></p>
  <p>HTML:</p>
  <pre><code>&lt;mat-list-item
        *ngFor=&quot;let page of pages&quot;
        matRipple
        routerLinkActive=&quot;active&quot;
      &gt;
        &lt;a [routerLink]=&quot;page.path&quot; (click)=&quot;drawer.close()&quot;
          &gt;&lt;mat-icon class=&quot;mat-18&quot;&gt;{{ page.iconName }}&lt;/mat-icon
          &gt;{{ page.name }}&lt;/a
        &gt;
  &lt;/mat-list-item&gt;
  </code></pre>
  <p>So now basically assigning <code>.active {background: red}</code> works as expected. What I wanted to do is apply the built in <code>theme</code> <code>$primary</code> color value. I'm using Angular Material <code>indigo-pink</code> theme so I've tried doing the following</p>
  <pre><code>@import &quot;~@angular/material/prebuilt-themes/indigo-pink.css&quot;;
  
  .active {
    background-color: $primary;
  }
  </code></pre>
  <p>This throws error</p>
  <pre><code>ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
     ╷
     │   background-color: $primary;
     │                     ^^^^^^^^
     ╵
  </code></pre>
  <p>Anything that I missed?</p>