angular-builder:browser-esbuild fails on angular material & scss imports

Command

build

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

Using the experimental esbuild in Angular 15 together with Angular/Materialv15 fails on importing some of the global scss files (and) when it encouters @use statements in those files.

When running the build using the normal angular browser builder, everything runs fine.

Minimal Reproduction

So running ng build works fine when using the regular builder @angular-devkit/build-angular:browser. When switching to @angular-devkit/build-angular:browser-esbuild, it borks on the scss files.

Console output:

> ng build

The esbuild browser application builder ('browser-esbuild') is currently experimental.
The 'budgets' option is currently unsupported by this experimental builder and will be ignored.
The 'extractLicenses' option is currently unsupported by this experimental builder and will be ignored.
The 'progress' option is currently unsupported by this experimental builder and will be ignored.
The 'inlineStyleLanguage' option is currently unsupported by this experimental builder and will be ignored.
✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/app/shared/typography/typography.component.scss 1:1                                                                                           root stylesheet

✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/variables.scss 1:1                                                                                                                            @import
  src/app/shared/button/button.component.scss 1:9                                                                                                   root stylesheet

✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/theme.scss 1:1                                                                                                                                root stylesheet

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

 ELIFECYCLE  Command failed with exit code 1.

theme.scss is located right at the root of the src folder, and starts off like this:

@use '@angular/material' as mat;
@import 'typography';
/* material theme definitions here */

Part of angular.json:

"build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",
    "options": {
        "outputPath": "dist/new-agent-portal",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["src/favicon.ico", "src/assets"],
        "styles": ["src/styles.scss", "src/theme.scss"],
        "scripts": [],
        "stylePreprocessorOptions": {
            "includePaths": ["node_modules", "src"]
        }
    },

Package.json:

{
  "name": "new-agent-portal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "pnpm run docs:json && storybook dev -p 6006",
    "build-storybook": "pnpm run docs:json && storybook build",
    "prepare": "husky install",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/material": "15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "14.3.0",
    "@angular-eslint/eslint-plugin": "14.3.0",
    "@angular-eslint/eslint-plugin-template": "14.3.0",
    "@angular-eslint/schematics": "14.3.0",
    "@angular-eslint/template-parser": "14.3.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-essentials": "^7.0.0-alpha.40",
    "@storybook/addon-interactions": "^7.0.0-alpha.40",
    "@storybook/addon-links": "^7.0.0-alpha.39",
    "@storybook/angular": "^7.0.0-alpha.40",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/testing-library": "^0.0.13",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^18.11.2",
    "@typescript-eslint/eslint-plugin": "5.37.0",
    "@typescript-eslint/parser": "5.37.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.23.1",
    "husky": "^8.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "karma-spec-reporter": "^0.0.34",
    "ngx-translate-testing": "^6.1.0",
    "sass": "^1.56.1",
    "sass-loader": "^13.1.0",
    "storybook": "^7.0.0-alpha.40",
    "style-loader": "^3.3.1",
    "typescript": "~4.8.4"
  }
}

Exception or Error

No response

Your Environment

Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: pnpm 7.16.0
OS: darwin arm64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0 (cli-only)
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0 (cli-only)
@angular-devkit/schematics      15.0.0 (cli-only)
@schematics/angular             15.0.0 (cli-only)
rxjs                            7.5.7
typescript                      4.8.4

Anything else relevant?

No response

angular / angular-cli