Module build failed: @import '~@angular/material/theming'

Question

My Angular 4.1.1 application build with Angular CLI 1.0.2 stopped working with the following error:

Module build failed:                                                                                                                                   
@import '~@angular/material/theming';                                                                                                                  
^                                                                                                                                                      
      File to import not found or unreadable: ~@angular/material/theming.                                                                              
Parent style sheet: /home/jan/src/fm-repos/fm-ui/src/app/assets/css/theme_imports.scss                                                                 
      in /home/jan/src/fm-repos/fm-ui/src/app/assets/css/theme_imports.scss (line 1, column 1)                                                         
 @ ./src/app/identity/sign-in/sign-in.component.ts 54:17-52                                                                                            
 @ ./src/app/identity/identity.module.ts                                                                                                               
 @ ./src/app/app.module.ts                                                                                                                             
 @ ./src/main.ts                                                                                                                                       
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts                                                                                 

Answer 1

This is a bug in Angular CLI's sass-loader dependency. You can work-around the issue by changing recommended theming import:

@import '~@angular/material/theming';

to:

@import '~@angular/material/_theming.scss';

For details, see sass-loader #447 for details.

Answer 2

In case anyone else has problems with this, another solution might be to change the

absolute path ~@angular/material/theming

to the

relative path ../../../node_modules/@angular/material/theming

starting from the importing SCSS file. The number of ../ varies based on your folder structure.