angular - 材质图像列表错误：@import "@material/feature-targeting/functions"；

Question

我想在我的 Angular 项目中使用 mdc-image-list。我收到一个错误：

@import "@material/feature-targeting/functions";
       ^
      Can't find stylesheet to import.
   ╷
21 │ @import "@material/feature-targeting/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/image-list/_mixins.scss 21:9         @import
  node_modules/@material/image-list/mdc-image-list.scss 21:9  @import
  stdin 2:9                                                   root stylesheet

我按照这里的安装步骤https://material.io/develop/web/components/image-lists/但我仍然收到此错误。我尝试删除node_modules并再次安装 npm。我不确定我的 sass-loader 是否有问题，因为我使用了 Material 的 Layout Grid，已导入@import "@material/layout-grid/mdc-layout-grid";并且工作正常。会出什么问题？

Answer 1

Add node_modules to the style preprocessor options in angular.json, so that the import path can be resolved:

"stylePreprocessorOptions": {
  "includePaths": [
    "./src/styles",
    "./node_modules"
  ]
},

Answer 2

您需要在材料的 node_modules 中的每次导入之前添加 ~@import "@material/feature-targeting/functions";

~@material/feature-targeting/functions" 每当编译器显示此错误时，就这样做