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

angular, angular-cli

Solution

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.

Problem

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 ```

Original source