Source map not working for SCSS files #50308
Description
Command
build, generate, run, serve
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
When a /* comment */ is placed in the SCSS, the position of the content generated by webpack (sourcemap) is displayed incorrectly.
It is important to point out that after removing the comment, the desired behavior is successfully obtained.
However, I also did a test using the following loaders in the webpack.config.js part: 'style-loader', 'css-loader', 'sass-loader'.
And even having the comment, the content was generated correctly.
That is, it is certainly not a sass-loader or dart-sass problem, it must be something external that is being used in the webpack settings that were provided by angular, or some plugin or something along those lines
The problem:
The source code:
This is a problem that I see exists, so I'm reporting on this channel, but not limited to just SCSS comments, as I write SCSS code other related issues happen, which makes it difficult to debug the application.
Minimal Reproduction
- Create an angular application with SCSS
- Put the following comment in scss:
//MEDIA QUERY MANAGER
/*
0 - 600: Phone
600 - 900: Tablet portrait
900 - 1200: Tablet landscape
1200 - 1800: Normal styles
1800+ : Big Desktop
1em = 16px
The smaller device rules always should write below the bigger device rules
Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
*/
- See the problem happen.
To make it easier I also forked the application on stackblitz, link:
https://stackblitz.com/edit/node-xn9fdy
cd angular-tour-of-heroes
npm run start (or ng serve)
Exception or Error
No response
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.0.1
Node: 16.14.2
Package Manager: npm 7.17.0
OS: linux x64
Angular: undefined
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1600.1
@angular-devkit/core 16.0.1
@angular-devkit/schematics 16.0.1
@angular/cli 16.0.1
@schematics/angular 16.0.1
Anything else relevant?
My package.json:
{
"name": "angular-tour-of-heroes",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.1",
"@angular/cli": "~16.0.1",
"@angular/compiler-cli": "^16.0.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~5.0.2"
}
}
I don't think it's a problem with the Google Chrome browser, or similar, because when viewing the generated source .map it's clearly noticeable that the error is in generating the sourcemap.
That is, just import and preview at https://sokra.github.io/source-map-visualization/#custom-choose