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