Material Image List Error: @import "@material/feature-targeting/functions";

Question

I want to use mdc-image-list in my Angular project. I'm getting an error:

@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

I followed the installation steps here https://material.io/develop/web/components/image-lists/ but I still get this error. I tried removing node_modules and npm installing again. I'm not sure if there is something wrong with my sass-loader because I used Material's Layout Grid, imported @import "@material/layout-grid/mdc-layout-grid"; and it's working fine. What could go wrong?

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

You need to add ~ before every import in the node_modules of material so it goes @import "@material/feature-targeting/functions";

become ~@material/feature-targeting/functions" and do so whenever the compiler shows this error