Skip to content

Application builder root stylesheet error #30196

Open
@dalexander-trc

Description

@dalexander-trc

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.

Image

  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: repro stepsWe cannot reproduce the issue with the information given

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions