DEV Community

Laxman Gore
Laxman Gore

Posted on • Edited on

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

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?

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more