Angular 17 upgrade Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.


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

  src\app\shared\_shared.theme.scss 2:9  @import
  src\app\_app.theme.scss 3:9            @import
  src\styles.scss 3:9                    root stylesheet`

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.

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

  src\app\shared\_shared.theme.scss 2:9  @import
  src\app\_app.theme.scss 3:9            @import
  src\styles.scss 3:9                    root stylesheet`

I'm upgrading to Angular 17. sass errors coming while running npm start.

Solution

This happens because angular material 17 no longer forwards @angular/material/theming. In fact, in the folder node_modules/@angular/material/core/theming there isn't a file called _index.scss that usually exports everything.

You can try to add instead @use '@angular/material' as mat and then apply the new mat namespace on same mixins you were using before, such as mat.define-light-theme or mat.define-dark-theme