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

[alexander-kastil]

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

[clydin]

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.

[lgpage]

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

[fbandrei]

Having the same issue with v17.0.7

[alexander-kastil]

@fbandrei my solution was to move theming from an imported stylesheet to style.scss

[Bullsized]

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?

[arsenstkacevs]

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

[djbanana1]

Got the same error... Any news on this one?

[fredrikbo]

Got it in 17.2.1. Any idea how to fix?

[Niekket]

Same issue here in Angular version 17.2.0

[clydin]

This is a legitimate error. That file is no longer present in the @angular/material package:
17.2.1: https://unpkg.com/browse/@angular/material@17.2.1/
16.2.14: https://unpkg.com/browse/@angular/material@16.2.14/

[born2net]

any resolution to this issue? same problem here :/

[born2net]

any resolution to this issue? same problem here :/

[Niekket]

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.