Angular upgrade 18: Error: Can't find stylesheet to import. 75 @import '@angular/material/theming';

Laxman Gore — Thu, 26 Dec 2024 11:01:40 +0000

I have upgraded angular version from 10 to 18 step by step.`

We are encountering an issue while working with Angular Material in an Angular 18 project. The specific error message is:

./src/styles.scss - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
╷
73 │ @import '@angular/material/theming';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles.scss 73:9 root stylesheet

This error persists despite multiple checks and attempts to resolve it. Below is a detailed account of our environment, steps taken, and observations.

Environment Details:

Angular CLI: 18.2.12

Node: 18.20.5

Package Manager: npm 10.9.2

OS: Windows 10 (64-bit)

Angular Packages:

@angular/animations: 18.2.13

@angular/common: 18.2.13

@angular/material: 18.2.14

@angular/cdk: 18.2.14

typescript: 5.5.4

Steps Taken So Far:

Verifying Dependencies:

Confirmed all required Angular Material dependencies are installed.

Used the following commands to reinstall packages:

npm install @angular/material @angular/cdk
npm rebuild node-sass
npm install

Checking angular.json:

Verified that angular.json includes styles.scss and no incorrect paths for Material themes.

"styles": [ "src/styles.scss", "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" ]
Validating styles.scss:

Ensured the following imports exist and resolve correctly:

`
@import '@angular/material/theming';
@import 'bootstrap/scss/bootstrap';
@import 'ngx-toastr/toastr';

Removed redundant imports and unnecessary prebuilt themes when defining a custom theme.

Custom Theme Setup:

Defined a custom Material theme in styles.scss:

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-purple);
$my-theme-accent: mat-palette($mat-blue, A200, A100, A400);
$my-theme-warn: mat-palette($mat-red);

$theme1: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($theme1);

Theme Selection Issue:

When running ng add @angular/material@18, we noticed that older themes like indigo-pink.css were missing from the available options:

? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
Azure/Blue
Rose/Red
Magenta/Violet
Cyan/Orange
Custom

However, indigo-pink.css exists in node_modules/@angular/material/prebuilt-themes/.

Validating Node Modules:

Verified the existence of @angular/material/theming in node_modules.

Command output for prebuilt themes:

Directory: C:\path\to\node_modules\@angular\material\prebuilt-themes

azure-blue.css
cyan-orange.css
deeppurple-amber.css
indigo-pink.css
magenta-violet.css
pink-bluegrey.css
purple-green.css
rose-red.css

Recompilation:

Ran the following commands to clear caches and recompile:

ng cache clean
npm cache clean --force
ng build --verbose
ng serve

Toastr and Bootstrap Integration:

Confirmed ngx-toastr and Bootstrap SCSS are installed and resolve properly.

Questions and Observations:

Is the Missing Theme the Issue?

Why are themes like indigo-pink.css not listed during the ng add @angular/material@18 setup, even though they exist in node_modules?

Is the Path Resolution the Root Cause?

Despite the correct paths in styles.scss and angular.json, why does @angular/material/theming fail to resolve?

Are There Changes in Angular Material 18?

Has the approach to theming or prebuilt themes changed in Angular 18, causing this incompatibility?

DEV Community: Laxman Gore

Angular upgrade 18: Error: Can't find stylesheet to import. 75 @import '@angular/material/theming';