Skip to content

Scss source maps mismatch in angular 16 #55508

@liorstezki

Description

@liorstezki

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

After upgrading my project to Angular v16 from Angular v14, I noticed that the source maps of my scss files were mismatched
The source maps changed (not necessarily correctly) when I removed imports of external packages

I created a test project using angular cli and installed two of the packages we use - bootstrap and @ng-select/ng-select and I saw that the problem is restored

before importing bootstrap and @ng-select/ng-select scss
app.component.scss

.test {
  color: red;
}

before

after importing bootstrap and @ng-select/ng-select scss

@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/@ng-select/ng-select/themes/default.theme.css";

.test {
  color: red;
}

after

Importing bootstrap or ng-select separately works fine. I also tried other packages combinations and got mismatched source maps

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/node-ej8xiu?file=index.js

Please provide the exception or error you saw

Scss source maps mismatch

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.1.1
Node: 18.12.1
Package Manager: npm 8.19.2
OS: darwin x64

Angular: 16.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.1
@angular-devkit/build-angular   16.1.1
@angular-devkit/core            16.1.1
@angular-devkit/schematics      16.1.1
@angular/cli                    16.1.1
@schematics/angular             16.1.1
rxjs                            7.8.1
typescript                      5.1.3

Anything else?

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions