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)
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!
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:
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”,