bug(@angular/material): Style doesn't build with yarn pnp

[TheConstructor]

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

No response

Description

As reported in #24128 and maybe fixed in #24536 using yarn in pnp mode means, that there is no predefined path-relation between @angular/material and @angular/cdk. Still https://github.com/angular/components/blob/main/src/material/_theming.scss (and others) user relative paths to access cdk-files and @forward them.

I realize, that there is a test-case specifically for this (https://github.com/angular/components/blob/main/integration/yarn-pnp-compat/), but it may be just not fully test the situation as it uses "@angular/cdk": "file:../../dist/releases/cdk" and "@angular/material": "file:../../dist/releases/material", in https://github.com/angular/components/blob/main/integration/yarn-pnp-compat/package.json, thus keeping the path relation between @angular/material and @angular/cdk.

Reproduction

Steps to reproduce:

1. Go to a local copy of https://github.com/angular/components/blob/main/integration/yarn-pnp-compat/
2. Change package.json to e.g. reference "@angular/cdk": "^16.0.3" and "@angular/material": "^16.0.3"
3. Run yarn install
4. Add @import '@angular/material/theming'; as second line to src/styles.scss
5. Run yarn run build

Expected Behavior

This should build

Actual Behavior

❯ yarn run build
Workspace extension with invalid name (defaultProject) found.
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.
✔ Browser application bundle generation complete.

./src/styles.scss - Error: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-7addf34da3/0/cache/sass-loader-npm-13.2.2-b5bbed2dce-0368e4eaa4.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @forward '../cdk/a11y/index.import';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  @angular\material\_theming.scss 5:1  @import
  src\styles.scss 2:9                  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./.yarn/__virtual__/mini-css-extract-plugin-virtual-c5c86c3c0c/0/cache/mini-css-extract-plugin-npm-2.7.5-7e01d66430-afc37cdfb7.zip/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-7addf34da3/0/cache/sass-loader-npm-13.2.2-b5bbed2dce-0368e4eaa4.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @forward '../cdk/a11y/index.import';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  @angular\material\_theming.scss 5:1  @import
  src\styles.scss 2:9                  root stylesheet

Environment

• Angular: 16.0.0
• CDK/Material: 16.0.3
• Browser(s): -
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[RazvanStoica0806]

Any fix for this issue?

[aikrez]

Encountering the same issue without pnp

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.
  ╷
5 │ @forward '../cdk/a11y/index.import';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  @angular\material\_theming.scss 5:1                                                     @import

update: found out that "@angular/cdk": "17.0.0", was installed instead of v16 after upgrading Angular to v17 (keeping Material on v16)