Not able to compile custom theme

[skined90]

I'm not able to set the custom material theme like in Theming your Angular Material app guide.

When I add the scss code like in the sample:

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    md-palette($md-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

When I run node-sass, I'm getting the error:

{ "status": 1, "file": "/home/skined/workspace/project/src/scss/style.scss", "line": 5, "column": 1, "message": "File to import not found or unreadable: ~@angular/material/core/theming/all-theme\nParent style sheet: /home/skined/workspace/project/src/scss/style.scss", "formatted": "Error: File to import not found or unreadable: ~@angular/material/core/theming/all-theme\n Parent style sheet: /home/skined/workspace/project/src/scss/style.scss\n on line 5 of src/scss/style.scss\n>> @import '~@angular/material/core/theming/all-theme';\n ^\n" }

Am I doing something wrong?

[crisbeto]

AFAIK the ~ prefix on the import is the notation used for importing in Webpack. If you're not using Webpack, you have to import the file directly.

[skined90]

@crisbeto I'm using a webpack.

[crisbeto]

Weird. You can try importing @import '~@angular/material/core/theming/_all-theme';. Technically it shouldn't make a difference, but it's worth a shot.

[skined90]

@crisbeto Did it also, but it doesn't work.

[fxck]

try without ~, you could also try to set up --include-path

[skined90]

@fxck I already tried. It doesn't work. It works for other libraries but with material does not.

[woowe]

I am had the same issue. I replaced ~ with ../node_modules/, it seems to be reading the file fine now but another issues arose.

{
  "status": 1,
  "file": "/home/jason/Projects/project-tracker/node_modules/@angular/material/core/_core.scss",
  "line": 4,
  "column": 1,
  "message": "It's not clear which file to import for '@import \"overlay/overlay\"'.\nCandidates:\n  overlay/overlay.scss\n  overlay/overlay.css\nPlease delete or rename all but one of these files.\n",
  "formatted": "Error: It's not clear which file to import for '@import \"overlay/overlay\"'.\n       Candidates:\n         overlay/overlay.scss\n         overlay/overlay.css\n       Please delete or rename all but one of these files.\n        on line 4 of node_modules/@angular/material/core/_core.scss\n>> @import 'overlay/overlay';\n   ^\n"
}

[faisalmuhammad]

@skined90 I am using webpack and I didn't face any issue while importing. See the code below:

@import './../node_modules/@angular/material/core/theming/all-theme';

Based on your app structure you can adjust the path to locate node_modules.

[dasis]

@faisalmuhammad thanks for the workaround. I also had the same issue. Using webpack as well with "angular-cli": "1.0.0-beta.22-1", "@angular/material": "^2.0.0-alpha.11-3",

[jelbourn]

We haven't been able to reproduce this issue. Feel free to open a new issue if you are able to provide a full reproduction.

[Dunky13]

Have same issue

[hashemnik]

Hi everybody I have same problem . any idea ?

[dahaupt]

@Dunky13 @hashemnik All styling things begin now with "mat".

Look at the updated theming guide: https://github.com/angular/material2/blob/master/guides/theming.md

[hashemnik]

Hi everybody Finally I solved my problem. I replaced @angular/material": "^2.0.0-beta.2", with @angular/material": "2.0.0-beta.1", In package.json file. And it work fine.

[onurcipe]

Having exactly the same problem... Any ideas?

using, webpack: 2.2.0 @angular/material: 2.0.0-beta.2 (tried 2.0.0-beta.1 but nothing changed)

[BenRacicot]

This issue certainly exists ("webpack": "2.2.1") However, @import './../node_modules/@angular/material/core/theming/all-theme'; worked for me.

Looks like you'll have to point directly to the all-theme file.

[onurcipe]

@BenRacicot already tried, doesn't solve the issue. Many also reported that pointing all-theme file doesn't solve the issue for them.

Using,

"dependencies": {
    "@angular/common": "2.4.7",
    "@angular/compiler": "2.4.7",
    "@angular/compiler-cli": "2.4.7",
    "@angular/core": "2.4.7",
    "@angular/forms": "2.4.7",
    "@angular/http": "2.4.7",
    "@angular/material": "2.0.0-beta.2",
    "@angular/platform-browser": "2.4.7",
    "@angular/platform-browser-dynamic": "2.4.7",
    "@angular/platform-server": "2.4.7",
    "@angular/router": "3.4.7",
    "@angular/upgrade": "2.4.7",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "1.16.1",
    "core-js": "2.4.1",
    "express": "4.14.1",
    "hammerjs": "2.0.8",
    "hbs": "4.0.1",
    "jsonwebtoken": "7.3.0",
    "mongoose": "4.8.3",
    "mongoose-unique-validator": "1.0.3",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.1.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ngtools/webpack": "1.2.4",
    "@types/core-js": "0.9.35",
    "@types/hammerjs": "2.0.34",
    "@types/node": "7.0.5",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "2.2.4",
    "del-cli": "0.2.1",
    "node-sass": "4.5.0",
    "raw-loader": "0.5.1",
    "sass-loader": "6.0.2",
    "typescript": "2.1.1",
    "webpack": "2.2.0",
    "webpack-merge": "2.6.1"
  }

[BenRacicot]

@onurcipe are you using a scss compiler? The compilation told me that there was an error trying to import that file because it didn't exist at that path. I had to look into the node_modules/@angular/material/ folders to find the real path and corrected my path.

Side note. It does seem that most online stuff is misleading. 💥 Either pointing to Material for ng1 or the use of md on css which has been changed to mat- to name a few. :boom: Seems like we're in the really early stages for Angular 2x Material...

[onurcipe]

@BenRacicot I am using "sass-loader": "6.0.2" and when I import all-theme as you did this time the AoT compiler cannot find core which is in the second line of all-theme as @import '../core';.

It is obvious that online documents are not up to date. Unfortunately at the moment, we should read the changelog.

By the way, for the ones who are facing the similar issues like I do, currently the only solution is to import these two lines and customize it in your css file. <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

[BenRacicot]

@onurcipe I had that issue too (I think) did you use @include mat-core()? Many sources say to include @include md-core() which is apparently deprecated...?

[onurcipe]

@BenRacicot yes I included mat-core(). Which compiler do you use for AoT compilation?

[BenRacicot]

@onurcipe wow now I'm stumped... here's my json file:"

    "@angular/common": "2.4.10",
    "@angular/compiler": "2.4.10",
    "@angular/compiler-cli": "2.4.10",
    "@angular/core": "2.4.10",
    "@angular/forms": "2.4.10",
    "@angular/http": "2.4.10",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "2.4.10",
    "@angular/platform-browser-dynamic": "2.4.10",
    "@angular/platform-server": "2.4.10",
    "@angular/router": "3.4.10",
    "@angular/upgrade": "2.4.10",
    "bcryptjs": "^2.4.0",
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "core-js": "^2.4.1",
    "debug": "~2.6.0",
    "express": "~4.15.2",
    "hammerjs": "^2.0.8",
    "hbs": "~4.0.0",
    "helmet": "^3.3.0",
    "jsonwebtoken": "^7.2.1",
    "mongoose": "^4.7.6",
    "mongoose-unique-validator": "^1.0.3",
    "morgan": "~1.8.0",
    "rxjs": "^5.0.0-rc.1",
    "serve-favicon": "~2.4.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^7.0.5",
    "angular2-router-loader": "^0.3.2",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "browser-sync": "^2.18.5",
    "del-cli": "^0.2.0",
    "html-loader": "^0.4.4",
    "node-sass": "^4.2.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "typescript": "2.2.1",
    "webpack": "2.2.1",
    "webpack-merge": "^4.1.0"
  }
}

[mafav]

Looks like they've changed the Github build of Material. Instead of

@import '~@angular/material/core/theming/all-theme';

Try this out:

@import '~@angular/material/_theming.scss';

[BenRacicot]

@mafav hmm not seeing that in my node_modules.. @import './../node_modules/@angular/material/core/theming/all-theme'; still works for me...

what version are you on?

[agusdutra]

I was facing the same issue.

I just changed 'style.css' to 'style.scss', updated it reference on the styles section of .angular-cli.json and it started working with the template improted just like the one in the material.angular.io example.

No need to include 'custom_theme.scss' on the angular-cli.

hope it helps.

[ghost]

I've just installed the latest version and had the same issue. So I looked through the source folders and I've found out that you have to import another file: @import '../node_modules/@angular/material/_theming';

[weichen2046]

There is no ./node_modules/@angular/material/core/theming/_all-theme.scss file any more after I upgrade from "@angular/material": "^2.0.0-beta.2 to "@angular/material": "^2.0.0-beta.3. You shold use @import '~@angular/material/theming' instead. I think the theming guide should update too.

[dotbe]

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

[xcash]

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

For beta.3 this path works

[natejgardner]

Weichen2046 got it!

@import '~@angular/material/theming

[baktash93]

Having the same issue. Seems like there is no folder named theming in the @angular/material. Shouldn't the npm install @angular/material bring the required files? Probably the Angular team removed the folder or moved it? If that is the case, then the docs at material.angular.io is way out of date.

[ghost]

When I looked in the docs yesterday, they where up to date. Have you installed the latest version?

Ahmad Baktash Hayeri notifications@github.com schrieb am Sa., 22. Apr. 2017, 9:45 vorm.:

Having the same issue. Seems like there is no folder named theming in the @angular/material. Shouldn't the npm install @angular/material bring the required files? Probably the Angular team removed the folder or moved it? If that is the case, then the docs at material.angular.io https://material.angular.io/guide/theming is way out of date.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/material2/issues/2277#issuecomment-296355560, or mute the thread https://github.com/notifications/unsubscribe-auth/AZL-2DXlUhEa3pRCNwDZf2wFncoWx2Rkks5rybAigaJpZM4LQmgG .

--

K. Andre Gyrnich

Leuner Straße 2b 35619 Braunfels

06442 2408950 01515 1699277

Andre.gyrnich@gmail.com oder Andre.gyrnich@outlook.de

[baktash93]

@andregyrnich, just referred the CHANGELOG.md and found that the issue is addressed. In the latest version (i.e. 2.0.0-beta.3 cesium-cephalopod) there is now a file named _theming.scss. Have included the file and will check if my issue is resolved.

[vijayamurugan]

I updated today and using 2.0.0.-beta.7 and changed to @import '~@angular/material/theming'; worked for me

[ccaymaz]

beta7?

I am using visual studio and I can load only beta3 for now. Should I check my npm version?

Currently I am using; @import '~@angular/material/_theming.scss'; (It is working. There is no intellisense but it is working.)

[Defmetalhead]

I am receiving this error after updating to the latest version of Material. I removed node_modules folder and reinstalled everything. How to I change the path for the scss file?

[roelzkie15]

There is no @angular/material/core directory in the latest version

[SublimeProphets]

Following the official theming guide on github or [material.angular.io] (https://material.angular.io/guide/theming) it still can't find the needed files, throwing following error: GET http://localhost:4200/~@angular/material/_theming.scss 404 (Not Found)

Im using angular-cli 1.1.1 with newest versions of angular and material(stable branch): { "name": "deliver-map", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^1.0.0-beta.0", "@angular/animations": "^4.2.5", "@angular/common": "^4.2.5", "@angular/compiler": "^4.2.5", "@angular/core": "^4.2.5", "@angular/forms": "^4.2.5", "@angular/http": "^4.2.5", "@angular/material": "^2.0.0-beta.7", "@angular/platform-browser": "^4.2.5", "@angular/platform-browser-dynamic": "^4.2.5", "@angular/router": "^4.2.5", "@asymmetrik/angular2-leaflet": "^1.3.2", "@asymmetrik/angular2-leaflet-filter": "^2.2.0", "@mapbox/point-geometry": "^0.1.0", "@mapbox/vector-tile": "^1.3.0", "@ngui/auto-complete": "^0.13.3", "@types/leaflet": "^1.0.63", "@types/leaflet-markercluster": "^1.0.3", "@types/leaflet.markercluster": "^1.0.0", "@types/xlsx": "0.0.34", "angular-2-local-storage": "^1.0.1", "angular2-openlayers": "^0.6.6", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "leaflet": "git+https://github.com/Leaflet/Leaflet.git#v1.0.3", "leaflet-draw": "^0.4.9", "leaflet.markercluster": "^1.0.6", "ng2-completer": "^1.5.2", "ng2-file-upload": "^1.2.1", "ng2-typeahead": "^1.2.0", "rxjs": "^5.4.1", "ts-xlsx": "0.0.11", "zone": "^0.3.4", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.1.1", "@angular/compiler-cli": "^4.2.5", "@angular/language-service": "^4.2.5", "@types/jasmine": "2.5.45", "@types/node": "^6.0.79", "codelyzer": "~3.0.1", "jasmine-core": "^2.6.4", "jasmine-spec-reporter": "^4.1.1", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3" } }

I tried following varieties to include the mixin-file:

@import '~@angular/material/theming'; @import '~@angular/material/_theming.scss';

All the other import-paths seems to be deprecated anyway.. I also tried o reinstall all node modules, it did not had any impact.

PS: I've included a prebuilt theme through -tag as mentioned in the guides and this solution is working without any problems. but when i tried to include it the "smart" @import way (@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';), it fails with the same error as mentioned above.

[m98]

@SublimeProphets you need to create the _theming.scss (or any other name you like) and also link to that inside the .angular.cli.json

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