Components: File to import not found or unreadable: ~@angular/material/theming When using node-sass directly

[camilahayashi]

Hi,

I am trying to build my own theme using this guide https://material.angular.io/guide/theming, however I am always getting the error:

_File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet_

I'm using Angular 4, Material 2.0.0-beta.3 but I don't use Angular CLI, so I had to use node-sass directly (as mentioned in the guide):

node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css

===== unicorn-app-theme.scss =======

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

===== package.json =======
{
"name": "my-app",
"version": "1.0.0",
"private": true,
"description": "test",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start karma.webpack.conf.js",
"build": "rimraf dist && webpack --config config/webpack.prod.js --bail",
"lint": "tslint ./src/*/.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^4.0.3",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/compiler-cli": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/platform-server": "~4.0.0",
"@angular/router": "~4.0.0",
"@angular/tsc-wrapped": "~4.0.0",
"@angular/upgrade": "~4.0.0",
"angular-in-memory-web-api": "~0.3.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"node-sass": "^4.5.2",
"rxjs": "5.0.1",
"sass-loader": "^6.0.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/hammerjs": "^2.0.34",
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.45",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.4",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.16.1",
"jasmine": "~2.4.1",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.1",
"lodash": "^4.16.2",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "~4.0.14",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"tslint": "^3.15.1",
"typescript": "~2.2.0",
"webpack": "2.2.1",
"webpack-dev-server": "2.4.1",
"webpack-merge": "^3.0.0"
},
"repository": {}
}

[fxck]

https://github.com/sass/node-sass#includepaths

not a support forum though

[lucasmafra]

same issue here!!

[quiksilverost]

Had same problem. My temporary solution:

npm install --save https://github.com/angular/material2.git

then in your custom-theme.scss:

@import '~material2-srcs/src/lib/core/theming/all-theme';

[fxck]

There is absolutely nothing to be fixed here. If you use node-sass directly, set up your includePaths, tilde is not enough, node-sass doesn't understand it.

http://stackoverflow.com/questions/37106230/node-sass-does-not-understand-tilde

[mmalerba]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[julienR2]

For those ending up here and using sass-loader, also check https://github.com/angular/material2/issues/4038#issuecomment-300369122
From sass-loader 6.0.4 import must include the full name (underscore + extentions).

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