Source map not working for SCSS files

Recently I updated cli version 1.3.2 to 1.6.3 and after that I can't see scss source mapped file in developer tools in Chrome of Firefox .

Versions : 1.6.3

Angular CLI: 1.6.3
Node: 8.9.3
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.6.3
@angular/language-service: 4.4.6
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

Create new angular app using ng new sample-app
Add scss file in angular-cli.json "styles": ["styles/styles.scss"]
Launch app using ng serve -sm -ec
Inspect styles using chrome dev-tools.

Observed behavior

No actual scss file, only style.bundle.css where all the styles compiled.

Desired behavior

Actual scss file can be seen in the developer tools with the line number

@clydin

@clydin any update on this?

Source map not working for LESS files

I have the same issue with Less files too.

The component LESS files appear, but the styles brought in via the CLI are not.

Versions

Angular CLI: 1.6.2
Node: 6.11.2
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.40
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

Dnia 5 stycznia 2018 04:42 Rukshan Lakshitha Dangalla <notifications@github.com> napisał(a): Recently I updated cli version 1.3.2 to 1.6.3 and after that I can't see scss source mapped file in developer tools in Chrome of Firefox . Versions : 1.6.3 Angular CLI: 1.6.3Node: 8.9.3OS: win32 x64Angular: 5.0.0... animations, common, compiler, compiler-cli, core, forms... http, platform-browser, platform-browser-dynamic... platform-server, router@angular/cli: 1.6.3@angular/language-service 4.4.6@angular-devkit/build-opt 0.0.36@angular-devkit/core: 0.0.22@angular-devkit/schemati 0.0.42@ngtools/json-schema: 1.1.0@ngtools/webpack: 1.9.3@schematics/angular: 0.1.11@schematics/schematics: 0.0.11typescript: 2.4.2webpack: 3.10.0 Repro steps Create new angular app using ng new sample-app Add scss file in angular-cli.json "styles": ["styles/styles.scss"] Launch app using ng serve -sm -ec Inspect styles using chrome dev-tools. Observed behavior No actual scss file, only style.bundle.css where all the styles compiled. zasobygwp.pl Desired behavior Actual scss file can be seen the developer tools with the line number zasobygwp.pl — You are receiving this because you are subscribed to this thread. Reply to this email directly, zasobygwp.pl view it on GitHub , or zasobygwp.pl mute the thread .

I've found that it is actually working for me, but just not for Bootstrap.

We're building bootstrap manually and therefore not using the default bootstrap.less found in the LESS folder.

It does not show references to my project's scss files nor to bootstrap 4's scss files. Only to styles.bundle.css.

My issues is with Bootstrap 3 and LESS

I've got a bootstrap.less (copy from ~/bootstrap/less/bootstrap.less) in my app folder that I've added to the angular-cli.json

Which when I run ng serve -sm -ec -env=mock shows source maps for my components but not for my complied global less files imported from the angular-cli.json

So the fix they mention about removing ~ will not work for me...

I am not even using ~ we use:

      "styles": [
        "../node_modules/prismjs/themes/prism.css",
        "../node_modules/@ngx-loading-bar/core/loading-bar.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "sass/designsystem/designsystem.scss",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.js",
        "../node_modules/popper.js/dist/umd//popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

The css is complied and works for all of these, but no source maps.

@smlombardi

@smlombardi Yeah, seems like a bug from at least 1.6.2 onwards

I've had this problem from 1.5 onwards

As I can see many folks have this issue. What can we do about this?

1.6.5 didn't solve the issue for me. (LESS)

This is making it very hard to work and debug css styling issues.

fix(@angular-devkit/build-angular): load style source maps inline so …

@ajspera

@ajspera this won't fix angular-cli 1.7.4, am I right? only new 6.x.x?

@lazysergey

@lazysergey Right. You might want to try #issuecomment-392316835 who had a hack working for 1.7.4. I would recommend getting up to 6, though. The next minor patch should have the fix in.

@ajspera

@ajspera were you able to get smaps to work? Is there somewhere I could read up on how to get them to work properly? I've never actually seen them work in Angular.

@BenRacicot

@BenRacicot Hmm, they said it would be in this past patch release but I don't see the commit in branch 6.2.x. It's on master, so it's in the maintainers' hands at this point. If you are desperate, you can make the changes from the commit mentioned above in your installation's source. It's only 2 lines.

Awesome thanks for replying.

Still sourceMap / extractCSS is not working for component specific styles

"@angular-devkit/build-angular": "^0.6.8",
"@angular/cli": "^6.0.8",

@metasong

@metasong's solution is working for Angular 6+ projects

@metasong

Any update on this? @metasong's solution doesn't work on component style.
Pls support LESS source map!!! This is suck a basic feature.

@clydin

@clydin @hansl guys, I believe this is not fixed in version 7.1.0, why close this issue?

@camsong

@camsong It works fine for me in version 7.0.4
This issue only about SCSS source maps.

It's working for me on version 7.0.3.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

fix(@angular-devkit/build-angular): load style source maps inline so …

Navigation Menu

Repository navigation

Source map not working for SCSS files #9099

Versions : 1.6.3

Repro steps

Observed behavior

Desired behavior

Source map not working for LESS files

Versions

73 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Source map not working for SCSS files #9099

Description

Versions : 1.6.3

Repro steps

Observed behavior

Desired behavior

Activity

rukshandangalla commented on Jan 8, 2018

michael-letcher commented on Jan 11, 2018

Source map not working for LESS files

Versions

Sadlowski commented on Jan 13, 2018

michael-letcher commented on Jan 15, 2018

smlombardi commented on Jan 17, 2018

michael-letcher commented on Jan 17, 2018

smlombardi commented on Jan 17, 2018

michael-letcher commented on Jan 17, 2018

dhvidding commented on Jan 17, 2018

rukshandangalla commented on Jan 21, 2018

michael-letcher commented on Jan 23, 2018

smlombardi commented on Jan 23, 2018

73 remaining items

lazysergey commented on Aug 27, 2018

ajspera commented on Aug 27, 2018

BenRacicot commented on Sep 11, 2018

ajspera commented on Sep 11, 2018

BenRacicot commented on Sep 11, 2018

ritwickdey commented on Oct 1, 2018

waqasdotnet commented on Oct 13, 2018

camsong commented on Nov 13, 2018

camsong commented on Nov 13, 2018

imkremen commented on Nov 13, 2018

JWess commented on Nov 13, 2018

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions