Open
Description
Command
serve, 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
browser
Description
Upgrading from browser builder to browser-esbuild or application throws an unexpected syntax error for the root stylesheet.
Minimal Reproduction
Our global styles are setup in a very similar manner to Stefanie Fluin's blogpost. Here are the related bits of code. Nothing else in the application has changed except the builder.
- Same results w/ application builder and necessary option changes
- Same results w/o reset.scss (top scss file throws error)
angular.json
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"outputPath": "dist/common",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets"
],
"styles": [
"src/style/global.scss"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
}
global.scss
///////////////////////////
// GLOBAL STYLES CASCADE //
///////////////////////////
// RESET (Browser Normalize)
@import '01-tools/reset';
// BRANDING
@import '02-brand/color';
@import '02-brand/typography';
// LAYOUT
@import '03-layout/grid';
@import '03-layout/spacing';
// BASE STYLES
@import '04-base/buttons';
@import '04-base/inputs';
@import '04-base/lists';
// MATERIAL COMPONENTS
@import '05-material/dialogs';
@import '05-material/form';
@import 'vars/color-material';
Exception or Error
X [ERROR] expected "{".
╷
8 │ @import '01-tools/reset';
│ ^
╵
src\style\global.scss 8:25 root stylesheet [plugin angular-sass]
angular:styles/global:styles:1:8:
1 │ @import 'src/style/global.scss';
Your Environment
Angular CLI: 17.3.16
Node: 20.11.0
Package Manager: npm 10.2.4
OS: win32 x64
Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.16
@angular-devkit/build-angular 17.3.16
@angular-devkit/core 17.3.16
@angular-devkit/schematics 17.3.16
@angular/cdk 17.3.10
@angular/cli 17.3.16
@angular/material 17.3.10
@schematics/angular 17.3.16
ng-packagr 17.3.0
rxjs 7.8.2
typescript 5.2.2
zone.js 0.14.10
Anything else relevant?
No response