Source map not working for SCSS files

[rukshandangalla]

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

[rukshandangalla]

@clydin any update on this?

[michael-letcher]

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

[Sadlowski]

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 .

[michael-letcher]

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.

[smlombardi]

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

[michael-letcher]

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...

[smlombardi]

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.

[michael-letcher]

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

[dhvidding]

I've had this problem from 1.5 onwards

[rukshandangalla]

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