WebStorm无法识别Angular Material的SASS主题函数，如何解决？

步骤1：刷新WebStorm索引 #

• 通过 File > Invalidate Caches... > Invalidate and Restart 刷新IDE索引，这能解决大部分包识别异常的问题。

步骤2：配置Angular项目的SASS预处理器路径 #

在项目根目录的angular.json中，确保stylePreprocessorOptions包含Angular Material的路径，让IDE能定位到主题文件：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": ["src/styles.scss"],
          "stylePreprocessorOptions": {
            "includePaths": ["node_modules/@angular/material"]
          }
        }
      }
    }
  }
}

步骤3：修正SASS文件的语法问题 #

原代码存在几处语法不规范（缺少分号、大括号，多余点号），这些会导致IDE识别异常，修正后的代码如下：

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

@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);
    }
  }
}

步骤4：检查WebStorm的SASS配置 #

• 打开 Settings > Languages & Frameworks > Style Sheets > Sass
• 确认已正确选择Node Sass或Dart Sass，并关联了项目的node_modules路径，版本与项目依赖一致。

步骤5：确保主题配置的正确传递 #

如果使用全局主题，在styles.scss中完成主题定义后，要正确导入组件mixin并传递主题对象，确保组件能关联到全局主题的配置：

@import '@angular/material/theming';

// 定义全局主题
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, A200, A100, A400);
$my-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

// 应用全局主题
@include angular-material-theme($my-theme);

// 导入并使用组件mixin
@import './path-to-component/doc-component';
@include doc-component($my-theme);

内容的提问来源于stack exchange，提问作者André