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 sass-loader@6.0.3

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