angular-cli: Can't find stylesheet to import is back with 17.0.0.-rc.0

Command

serve

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.2.7

Description

I just migrated an existing Angular project on a Windows PC from 16.2.7 to 17.0.0-rc.0 and got an error that was fixed in #25660

Minimal Reproduction

Take any ng 16.2x project with a global style sheet and upgrade it to 17rc

Exception or Error

[ERROR] Can't find stylesheet to import.
  ╷
3 │ @import "__NG_PACKAGE__;E%3A%5Cgit-classes%5Caz-native%5Capp%5Cweb%5Cfood-shop%5Csrc%5Ctheme;@angular/material/theming";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  theme.scss 3:9       @import
  src\styles.scss 2:9  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

Your Environment

Angular CLI: 17.0.0-rc.0
Node: 18.17.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 17.0.0-rc.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0-rc.0
@angular-devkit/build-angular   17.0.0-rc.0
@angular-devkit/core            17.0.0-rc.0
@angular-devkit/schematics      17.0.0-rc.0
@schematics/angular             17.0.0-rc.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.0

Anything else relevant?

No response

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 2
Comments: 17 (2 by maintainers)

Most upvoted comments

I have this issue with v17.0.4

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
3 │ @import "@angular/material/theming";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme.scss 3:9  @import
  src\styles.scss 1: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.
  ╷
3 │ @import "@angular/material/theming";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme.scss 3:9  @import
  src\styles.scss 1:9        root stylesheet

+14

lgpage on Dec 18, 2023

Removing the tilde symbol from the string worked. Initial string that didn’t work was @import "~codemirror/theme/material"; after removing ~ the error went away.

The final import looked like this @import "codemirror/theme/material";

Angular version 17.0.0

arsenstkacevs on Jan 17, 2024

any resolution to this issue? same problem here 😕

Yes, comment out the @import ‘@angular/material/theming’; part and remove everything theming related in your application. Change were necessary.

Niekket on Mar 8, 2024

Having the same issue with v17.0.7

fbandrei on Dec 29, 2023

This should be addressed via #26102 which will be available in 17.0.0-rc.1 later this week. If you are still encountering issues after this upcoming release, please let us know.

clydin on Oct 23, 2023

any resolution to this issue? same problem here 😕

Yes, comment out the @import ‘@angular/material/theming’; part and remove everything theming related in your application. Change were necessary.

This needs a lot of elaboration.

adampwright on Mar 9, 2024

Got the same error… Any news on this one?

djbanana1 on Feb 2, 2024

Same issue here in Angular version 17.2.0 afbeelding

Niekket on Feb 22, 2024

Same here, after updating from Material 16.2.12 to 17.0.4, I get this:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
2 │ @import '@angular/material/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  _theme.scss 2:9      @import
  src\styles.scss 2: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.
  ╷
2 │ @import '@angular/material/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  _theme.scss 2:9      @import
  src\styles.scss 2:9  root stylesheet

It’s as if the main theming file is not present:

I tried rerouting it to the _core and _core-theme SCSS files, but still - nothing:

Any idea on how to fix this?

Bullsized on Jan 11, 2024