WebStorm doesn't understand angular material functions in SASS

Question

I have an Angular application that uses Angular Material and SASS. I have a few files like the following one:

// Import library functions for theme creation.
@import '@angular/material/theming'

@mixin doc-component($config-or-theme)

  $config: mat-get-color-config($config-or-theme) //Unknown function 'mat-get-color-config' 

  $primary: map-get($config, primary)
  $accent: map-get($config, accent)
  $warn: map-get($config, warn)

  .doc-sub

    .download-button
      color: mat-color($primary, 500). //Unknown function 'mat-color' 

    .download-button .icon-accent
      color: mat-color($accent, 500). //Unknown function 'mat-color' 

  .controls
    button
      background-color: mat-color($warn, 500) //Unknown function 'mat-color'

As you can see in the comments, when I hover over the functions mat-get-color-config or mat-color I get the message: Unknown function... from WebStorm, as well as getting a red underline on them.

This code compiles and runs without errors, I get the colors rendered as expected. However, I would like WebStorm to understand Angular Material Theming functions, not highlight them as errors and also sugest autocomplete.

Answer 1

This is due to a non-breaking change in syntax from Angular Material 11 to 12.

The code above still works through Angular Material v15, but to make the error go away the following syntax can be used:

@use '~@angular/material' as mat

@mixin doc-component($config-or-theme)

  $config: mat.get-color-config($config-or-theme) 

  $primary: map-get($config, primary)
  $accent: map-get($config, accent)
  $warn: map-get($config, warn)

  .doc-sub

    .download-button
      color: mat.color($primary, 500)

    .download-button .icon-accent
      color: mat.color($accent, 500)

  .controls
    button
      background-color: mat.color($warn, 500)

The use of tilde was required in v12, but deprecated from v13:
@use '@angular/material' as mat