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

[YeomansIII]

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.

[merofeev]

Hello @YeomansIII,
It seems to be caused by the new version (6.0.4) of sass-loader. Please, see my comment here for details.

[kuncevic]

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

[netmikey]

For others landing on this issue:

We're not forced to add .scss extension: it's a bug in version 6.0.4 of sass-loader. A fix is out on Github (6.0.5) but hasn't made it to npm yet. My guess is that compilation will work again in a couple of hours without any change to your angular project's code base.

[TautvydasDerzinskas]

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

[phamtuananh791994]

https://github.com/angular/angular-cli/issues/6242

[jelbourn]

Closing since this isn't a problem in Angular Material.

[targunp]

here is a fix, put this in your .angular-cli.json:

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

[jamiulislam]

use slash(/) after tilde(~)
@import '~/boostrap/dist/css/bootstrap.css';

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}