components: Not able to compile custom theme

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?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 4
  • Comments: 40 (4 by maintainers)

Most upvoted comments

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’;

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.

Weichen2046 got it!

@import '~@angular/material/theming

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

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

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

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

@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”,