CODEWITHSUNDEEP
angularmaterial-designangular6
Paco Zevallos
Paco Zevallos

Reputation: 2275

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

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: enter image description here

Upvotes: 0

Views: 1101

Answers (1)

Ritwick Dey
Ritwick Dey

Reputation: 19012

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

Upvotes: 3

Related Questions