Failed to import 3rd party material sass/scss files in Angular 6 Project

Question

Can I use Material components in Angular? If so, what is the correct way to do it?

I am using the guide of this link

I used: npm install @ material/image-list

Then I import in my style.scss: @import "@material/image-list/mdc-image-list";

And when compiling I get the following error:

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed: @import "@material/image-list/mdc-image-list"; ^ File to import not found or unreadable: @material/image-list/mdc-image-list. in /Users/pacozevallos/cuscoAvisos/avisos/src/styles.scss (line 66, column 1)

Then when I check mdc-image-list.scss I find this:

I am also using Angular Material, but that is not my query, thank you. — Paco Zevallos
My query is if you can use the Material Design components, if so? What is the right way. If you check in the specific link clearly, it is Material Design and not Angular Material. By the way Angular material I already have it installed. — Paco Zevallos
I'm sorry if I was not clear. What happens is that there are some components that are more complete in Material Design for example I tried to use Grid-list of Angular Material but I want a masonry grid and that I can get with Material Design (image-list). Just to give an example. — Paco Zevallos
Fair enough. I'll step out, since I don't have a good answer, but you should put that in your question. — isherwood

Ritwick Dey Ritwick Dey · Accepted Answer · 2018-05-30T19:37:11

You've to configure Angular CLI to fix this issue.

By default, it searches for ./.

@import "@material/image-list/mdc-image-list" === import from ./@material/image-list/mdc-image-list

But this is a third party module that stored in node_modules.

Open angular.json file and change stylePreprocessorOptions.includePaths propery.

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

Sample Config:

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

There is an alternative solution. You can use ~ sign to tell Angular CLI that pick this from node_module.

E.g. @import "~@material/image-list/mdc-image-list"

But it'll not work for this setup as this scss has also dependency that need to be searched from node_module.

Reference: Angular Wiki

Failed to import 3rd party material sass/scss files in Angular 6 Project

1 Answers