Closed
Description
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