angular-cli >= 1.0.1: File to import not found or unreadable (SCSS build error)

[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 import in 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/material2 repo https://github.com/angular/material2/issues/4449. This seems like it is most likely an issue with angular-cli and whatever new scss processors were added in version 1.0.1.

[medeirosrich]

Same problem

"dependencies": {
"@angular/animations": "^4.1.0",
"@angular/common": "^4.1.0",
"@angular/compiler": "^4.1.0",
"@angular/compiler-cli": "^4.1.0",
"@angular/core": "^4.1.0",
"@angular/forms": "^4.1.0",
"@angular/http": "^4.1.0",
"@angular/material": "2.0.0-beta.3",
"@angular/platform-browser": "^4.1.0",
"@angular/platform-browser-dynamic": "^4.1.0",
"@angular/platform-server": "^4.1.0",
"@angular/router": "^4.1.0",
"@types/hammerjs": "^2.0.33",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"hammerjs": "~2.0.8",
"jquery": "^3.2.1",
"moment": "^2.17.1",
"moment-timezone": "^0.5.11",
"ng2-bootstrap": "^1.1.16-7",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.1.0",
"signalr": "^2.2.1",
"ts-helpers": "^1.1.1",
"typescript": "^2.2.1",
"web-animations-js": "^2.2.2",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^2.4.0",
"@types/hammerjs": "^2.0.34",
"@types/jasmine": "2.5.38",
"@types/jquery": "^2.0.41",
"@types/moment-timezone": "^0.2.34",
"@types/node": "~6.0.60",
"@types/signalr": "^2.2.33",
"codelyzer": "~2.0.0-beta.4",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.1.1",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.2.1"
}

[kyle-mccarthy]

I've gotten around this with the following hack @import '~@angular/material/_theming.scss'; but I shouldn't be required to do this...

@angular/cli: 1.0.2
node: 6.9.5
os: darwin x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/compiler-cli: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/platform-server: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2

[clydin]

This is caused by an issue with the release today of sass-loader 6.0.4. It appears that a fix is in progress for the issue and hopefully a new release will be available soon.

As a temporary workaround until then you can pin the version to 6.0.3 via:
npm i -DE [email protected]

UPDATE:
6.0.5 has been released. The above temporary workaround is no longer needed.

[filipesilva]

As @clydin mentioned this was a problem with sass-loader, being tracked in https://github.com/webpack-contrib/sass-loader/pull/450 and for which a fix is already released.

[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._}