angular-cli >= 1.0.1: File to import not found or unreadable: ~@angular/material/theming

Bug, feature request, or proposal:

BUG

What is the expected behavior?

Angular CLI/Webpack should build without giving SCSS errors.

What is the current behavior?

Getting import unreadable for custom theming base scss file.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/styles/custom-app-theme.scss
Module build failed:
@import '~@angular/material/theming';
^
      File to import not found or unreadable: ~@angular/material/theming.
Parent style sheet: stdin
      in /Users/jason/web-app/src/assets/styles/custom-app-theme.scss (line 70, column 1)
 @ ./src/assets/styles/custom-app-theme.scss 4:14-216
 @ multi ./src/assets/styles/ptone.scss ./src/assets/styles/custom-app-theme.scss ./~/cropperjs/dist/cropper.css ./src/assets/styles/pace.css ./~/prismjs/themes/prism-okaidia.css ./src/styles.scss
webpack: Failed to compile.

What are the steps to reproduce?

Try to build project with custom material2 theme (importing ~@angular/material/theming) with angular-cli version >= 1.0.1.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.1.1 Angular-cli 1.0.1, 1.0.2 Material 2.0.0-beta.3

Is there anything else we should know?

Posting this here as well as in the angular/angular-cli repo https://github.com/angular/angular-cli/issues/6242. This could be an issue with the theming.scss and a new version of scss loader that angular-cli is now using.

[TautvydasDerzinskas]

Having the same issue. It’s a pity that angular-cli does not have fixed versions on dependencies…

[kuncevic]

according to @merofeev now we have to add .scss extension: @import "~@angular/material/_theming.scss";