Trying to import angular material theming file in my custom theme but the file is not found

Question

I tried to import angular material theming file in my custom theme and when i try to generate css code i have an error:

$ sass src/_custom-theme.scss
Error: Can't find stylesheet to import.
  ╷
2 │ @import '~@angular/material/_theming.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

This is the first line of my file. I also tried with the following line but I get the same error:

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

If I try to import the file like this it works:

@import '../node_modules/@angular/material/theming';

But the curious thing is that by importing a prebuild theme like this, just for a test, it works

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'

WebStorm manage to generate the css and use it when it launches the webapp with ng serve but still displays the error message. The error message is displayed with webstorm and sass

Version:

• Angular: 7.2.12
• Material: 7.3.7
• Sass: 1.17.4 compiled with dart2js 2.2.0

Do you have an idea to solve this problem? Thank you very much.

Answer 1

If you are using Angular 9 and added the @angular/material package using ng add @angular/material this issue could arise. This is because the ng add command uses packages meant for older versions of Angular and is not yet compatible with v9 as of today. This can be fixed by installing via npm install @angular/material command instead. You may need to first uninstall the package. If that still doesn't work, delete the node_modules folder and package-lock.json and run npm install.

Since this is an old post, I'm going to assume this happened near the Angular v8 release, which would presumably result in the same behavior until ngrx was updated to support v8 via the npm add command. The same solution should solve the problem for future versions of Angular version updates also.