5

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?

Edric
  • 24,639
  • 13
  • 81
  • 91
Char
  • 2,073
  • 8
  • 28
  • 45

2 Answers2

3

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"
  ]
},
Pirmin Rehm
  • 351
  • 2
  • 5
1

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

Mohamed Mahdi Allani
  • 37
  • 4