2

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);
}
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
ckky1213
  • 321
  • 5
  • 14

3 Answers3

1

The import path is not correct, it should be:

@import '~@angular/material/theming';

You can see here more information.

Adrian Fâciu
  • 12,414
  • 3
  • 53
  • 68
  • I tried this already, it still not work, has the same error....I think it must something else goes to wrong – ckky1213 Aug 23 '18 at 13:18
0

Try file name without extension

@import '@angular/material/_theming.scss';
ptung
  • 3
  • 1
-1

Try accessing the _theming.scss file this way (change the path to match yours):

@import "../../../node_modules/@angular/material/_theming";

I tried @import '~@angular/material/theming'; also using NPM node-sass and got the error this way...

ravo10
  • 895
  • 9
  • 18