I got the error when I follow the instruction online https://material.angular.io/guide/theming
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed: @import '~@material/theme'; ^ File to import not found or unreadable: ~@material/theme. in D:\Practice\angular\styles.scss (line 1, column 1)
I have no idea why it didn't find the material/theme or why it can't be imported as I can see @material/theme under my node_modules file.
@import '~@material/theme';
// always include only once per project
@include mat-core();
// import our custom themes
@import 'my-theme.scss';
@import 'my-light-theme.scss';
@import 'my-dark-theme.scss';
.my-theme {
@include angular-material-theme($my-theme);
}
// additional css classes
// you can hardcode one of them on the <body> tag
// or switch dynamically during runtime with [class]
.my-light-theme {
@include angular-material-theme($my-light-theme);
}
.my-dark-theme {
@include angular-material-theme($my-dark-theme);
}
Try file name without extension