Source maps for css/sass #2020

retallicka · 2016-09-08T11:08:22Z

I am using the following setup:

Mac OSX El capitan
angular-cli v1.0.0-beta.11-webpack.8, branch: master
node 6.5.0
os: darwin x64
Using Sass

This might not be a bug with angular-cli, perhaps it is a limitation with angular2 but I am looking for anyone who's managed to solve this. I cannot get the sass to be source mapped. I want to inspect the CSS and see where a particular value is being set.

Personally, I am trying to work out how to edit the setup so I can do this locally. I am not too concerned in editing the webpack config, this is only going to be an issue in development, not production. But thinking globally, I think this should just work for anyone using angular-cli.

I have tried adding the source map commands here to webpack-build-common but no luck... I still see only the css in the head and nothing external.

I also saw another user trying something here with LESS, maybe I can do similar...
#1656 (comment)

I also found this issue in the angular project but it appears to be fixed now.

This issue appears whether I use css, sass and whether I change ViewEncapsulation within the component or not.

I am not at all familiar with webpack and only angular 1.5 so please forgive me. Any help appreciated :)

Edit: here is my project setup

retallicka · 2016-09-08T14:47:49Z

I managed to solve my issue by editing the webpack-build-common.ts file to have

{ exclude: styles, test: /\.scss$|\.sass$/, loaders: ["raw-loader", 'postcss-loader', 'sass-loader', "sass?sourceMap"] }

and

{ include: styles, test: /\.scss$|\.sass$/, loaders: ["style", "css?sourceMap", "sass?sourceMap"] }

instead of the previous loaders for those .scss tests. This seems to be OK for development so far.

filipesilva · 2016-09-19T02:55:10Z

@retallicka good job tracking it down!

@TheLarkInn is this something we should add to our config? I'm all for it if it helps users, and doesn't affect prod builds.

hafarey · 2016-10-20T17:30:54Z

I'm using angular-cli 1.0.0-beta.16.

What I needed for my project was to be able to just track down CSS issues during development. Thanks to the hint from @retallicka, I edited webpack-build-common.js and changed

{
  include: styles,
  test: /\.css$/,
  loaders: ['style-loader', 'css-loader', 'postcss-loader']
}

to

{
  include: styles,
  test: /\.css$/,
  loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader']
}

This seems to be working so far. But an option to enable/disable this from the CLI would be great.
I presume that I will have to remove this change before building for production--is that right?

ggedde · 2016-10-22T10:04:49Z

I also had to update to angular-cli: 1.0.0-beta.18 as 17 would generate an error when adding ?sourceMap.

However, I still can't get the source-maps to map correctly, the source maps are only pointing to the parent selector.
Seen Here: #2826

@retallicka Are the SourceMaps pointing to the correct selector for you? If so can you post your webpack config file settings.

Thanks

alfupe · 2016-11-17T09:20:29Z

Hi,
I'm using 1.0.0-beta.20-4.

I was hoping that beta.20-4 would solve this issue but after updating from beta.19 the styles have lost the sourceMap and it's impossible to inspect in the browser, just the same as before applying the changes suggested by @retallicka but now I think that webpack-build-common.js has changed a lot and is not possible to apply this temporal solution again.

Any workaround please? Thanks a lot!

filipesilva · 2016-11-22T14:24:46Z

Reopening to investigate.

sneridagh · 2016-12-02T09:45:56Z

@filipesilva @TheLarkInn Please fixing this is quite important. The referenced PR fixes it:
#3272

Could you take a look and merge it, please? Thanks!
Thanks also @mikejpeters !

aL3891 · 2017-01-03T10:58:16Z

I also have this problem in 1.0.0-beta.24, repo'd by doing ng new test, putting some css in styles.css and doing ng serve and then navigating to http://localhost:4200/styles.bundle.map results in

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles.bundle.css","sourceRoot":""}

the js bundles seem to work as expected.

(i'm very new to angular 2 and angular cli so I might have missed a needed setting though)

filipesilva · 2017-01-03T11:50:25Z

It seems there might be something missing in #3402 then. Will have to investigate.

montella1507 · 2017-01-20T11:41:30Z

@filipesilva hello, whats the current state?

cli-beta.26 stilll sourcemaps:
http://localhost:4200/styles.bundle.map

//cli.json

styles: [
"style.scss"
]

ng serve --extract-css=true

marekstabla · 2017-01-25T11:14:37Z

@filipesilva
quick fix that works for me:
#4219

filipesilva · 2017-01-25T11:25:42Z

@marekstabla I tried your fix but don't see any difference with a .css file. How did you test it was working?

filipesilva · 2017-01-25T11:29:55Z

I tried fiddling a bit more and it seems to work with a sourceMap (no s at the end) query. Will try to put up a PR with a fix and tests.

marekstabla · 2017-01-25T11:36:07Z

@filipesilva
difference is inside map file (http://localhost:4200/styles.bundle.map) - looks low now it's properly generated

it works for me with s at the end - anyway let me know if that works for you :)

edit
double checked - it works only without s. Sorry!

montella1507 · 2017-01-27T09:12:19Z

@marekstabla hell no please. its slow. Super slow in compare with normal mode. LIke 8sec and 36sec

filipesilva · 2017-01-27T12:47:48Z

Argh that's a really bad bug. The workaround they mention isn't very good either because it'd break on a number of scenario. I'm following that issue to see if there's a fix.

Meanwhile the best I can say is that turning off sourcemaps will fix it.

brendenpalmer · 2017-01-27T19:06:48Z

@filipesilva: IMO, that's not really a good solution either, unfortunately. Debugging TypeScript without sourcemaps is not ideal.

The current options that I can think of to solve this for our development environment are the following:

Enable extract CSS in development (not ideal)
Use a linked version of the CLI with some modifications to it (also not ideal)

Another way to mitigate this in the interim would be to treat sourcemaps for styles and TypeScript separately configuration-wise. That way the user could decide to disable sourcemaps for styles if necessary. Obviously not ideal, but not sure what else we could do here. Thoughts?

filipesilva · 2017-01-28T22:18:19Z

@brendenpalmer @marekstabla @montella1507 I've opened a new issue to track this problem: #4273

I don't have a good solution for now. Will try and see if the original problem can be addressed.

Fix angular#2148 Fix angular#2020 Fix angular#2826 Close angular#2646

Fix angular#2020

cjmosure · 2017-02-14T01:27:16Z

SCSS source maps have never worked for me in versions 1.0.0-beta.19 to the latest 1.0.0-beta.31. I don't know what I'm missing - all styles in Google Chrome inspector show as inlined. It's frustrating and I've been following these source map issue threads for months.

Currently I'm running 1.0.0-beta.31 and tried upgraded and fresh instances on macOS and Google Chrome - latest versions.

Relevant config is:

"styles": [
        "styles/app.scss"
      ],

...

"defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }

alfupe · 2017-02-14T10:17:37Z

@cjmosure please run your project again using the flag --ec=true i.e.: ng serve --ec=true.

I can't remember where I read a suggestion to use this flag, but it does exactly what we need on chrome debugging.

cjmosure · 2017-02-15T23:51:50Z

@alfupe you are a boss sir, that worked for me.

alfupe · 2017-02-16T08:45:34Z

@cjmosure :-) I'm glad to read that this worked for you also.

kaynz · 2017-02-16T09:20:02Z

@cjmosure @alfupe
I've got same config like cjmosure. Running ng serve --extract-css=true does not solve the problem for me =/ Any suggestions? Do I need a special folder structure? Do I need to list every single SCSS in angular-cli.json?

alfupe · 2017-02-16T09:47:09Z

@kaynz did you updated the cli from a former version? if you create a fresh project using the latest cli version the problem persists?

Regarding folder structure, I don't think the problem is there but anyhow I don't use the styles.scss in src/. My main .scss file is in src/assets/main.scss so my angular-cli.json is:

"styles": [
    "assets/scss/main.scss"
]

In my case using the --ec=true (or --extract-css=true) flag works fine for the global scss but the component's scss still gets inlined and Chrome dev tools points to <style>...</style> tags in the page header, but i think it's a normal behaviour.

One last thing I would try is completely delete node_modules and make a npm installto check possible inconsistencies in your dependencies.

I'm in cli beta30 and this is working for me since at least beta 28. Some of my package.json dependencies regarding are:

"dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "@angular/http": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/router": "^3.4.5",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.1",
    "core-js": "^2.4.1",
...
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/bootstrap": "^3.3.32",
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.39",
    "@types/node": "^6.0.62",
    "@angular/cli": "^1.0.0-beta.30",
...
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "^2.1.5"
  }

kaynz · 2017-02-16T09:56:38Z

@alfupe Thank you.
I did not update from a former version. Fresh install, fresh node_modules.

Yes, you're right. --extract-css=true works for the global scss.
But how do I debug scss files used in the components with

styleUrls: ['../styles/header.component.scss'],

Or should I import all my scss files in the global styles.scss and remove component styles?

alfupe · 2017-02-16T10:18:03Z

@kaynz it depends, I style the entire application most of the time in global .scss. 95% of my styles are there. I use component's scss only when those styles are not going to be shared between components, so (for me) if I can't debug those inlined styles is generally a minor problem among other things because I know very quickly where this css rules are and I edit them directly in the IDE instead of testing in Chrome.

Being said that, it would be very nice also to have sourcemaps for the component's styles.

kaynz · 2017-02-16T10:23:13Z

@alfupe Looks like this was possible earlier... angular/angular#9664 ?

alfupe · 2017-02-16T10:32:58Z

@kaynz good question. To be honest I don't know if the problem comes from angular or from angular-cli since the change to webpack...

BenRacicot · 2017-04-05T14:15:28Z

Has there been any movement on component scss sourcemaps with the cli?

KoziukSerhiy · 2017-05-18T09:12:53Z

When you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command

ng serve -sm -ec

or

ng serve --sourcemap --extractCss

I use Angular Cli -v 1.0.3, and More information - Angular CLI special cases

Avien · 2017-05-18T14:47:57Z

@Koziuk-S As said here it only works for global scss, not the component scss files
I am also looking for a solution right now

codestothestars · 2017-05-18T17:20:16Z

The same seems to be true of Less. I'm compiling my Less stylesheets using webpack with @ngtools/webpack and source map info is not being written to the generated component styles. I'm not using the Angular CLI. Global styles are working just fine, but they're not compiled by any of the Angular-specific tools.

smlombardi · 2017-05-25T20:29:09Z

FWIW, the method from @Koziuk-S works great, but for some reason Safari (both 10.1.1 and TP30) do not see the source maps and still points to styles.bundle.css for all rules.

UPDATE: Also broken in TP 32/Safari 11.

However, Chrome is working perfectly with the same files, same build etc.

rsbrodie · 2017-06-12T14:21:46Z

Can anyone provide any feedback as to whether it's possible to have source maps available for component scss? If so, is there an ETA?

rwngallego · 2017-07-15T00:28:45Z

I can't believe we are still having this problem :(

BenRacicot · 2017-07-19T19:04:41Z

This issue(and several others on sourcemaps) seem closed. Perhaps someone should create a detailed issue with reference to this an the other dead threads?

Tenemo · 2017-09-18T01:25:17Z

Is there any kind of a workaround for this?

angular-automatic-lock-bot · 2019-09-07T12:40:37Z

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

filipesilva assigned TheLarkInn Sep 19, 2016

filipesilva added type: enhancement labels Sep 19, 2016

montella1507 mentioned this issue Oct 17, 2016

Allow disabled ViewEncapsulation for global styles #2742

Closed

filipesilva added type: bug/fix and removed type: enhancement labels Oct 27, 2016

jimitndiaye mentioned this issue Oct 27, 2016

fix(build): Use static files for styles #2646

Closed

filipesilva closed this as completed in a6415cc Oct 28, 2016

filipesilva reopened this Nov 22, 2016

filipesilva added needs: investigation Requires some digging to determine if action is needed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Nov 22, 2016

mikejpeters mentioned this issue Nov 24, 2016

fix(webpack): fix css sourceMap option #3272

Closed

filipesilva assigned filipesilva and unassigned TheLarkInn Jan 3, 2017

MickL mentioned this issue Jan 5, 2017

How to enable source map for saas? ("1.0.0-beta.22-1) #3666

Closed

filipesilva mentioned this issue Jan 27, 2017

CSS Sourcemap is always empty #4199

Closed

MRHarrison pushed a commit to MRHarrison/angular-cli that referenced this issue Feb 9, 2017

feat(build): use static files for css

99fdd33

Fix angular#2148 Fix angular#2020 Fix angular#2826 Close angular#2646

MRHarrison pushed a commit to MRHarrison/angular-cli that referenced this issue Feb 9, 2017

fix(styles): correctly output sourcemaps (angular#4222)

dbb3175

Fix angular#2020

LinboLen mentioned this issue Feb 18, 2018

fixbug: sourcemap not working #9674

Closed

devbold mentioned this issue Sep 19, 2018

Source map not working for SCSS files rcnfinance/rcn-loans#104

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Source maps for css/sass #2020

Source maps for css/sass #2020

Comments

retallicka commented Sep 8, 2016 • edited Loading

retallicka commented Sep 8, 2016

filipesilva commented Sep 19, 2016

hafarey commented Oct 20, 2016

ggedde commented Oct 22, 2016 • edited Loading

alfupe commented Nov 17, 2016

filipesilva commented Nov 22, 2016

sneridagh commented Dec 2, 2016

aL3891 commented Jan 3, 2017 • edited Loading

filipesilva commented Jan 3, 2017

montella1507 commented Jan 20, 2017

marekstabla commented Jan 25, 2017

filipesilva commented Jan 25, 2017

filipesilva commented Jan 25, 2017

marekstabla commented Jan 25, 2017 • edited Loading

montella1507 commented Jan 27, 2017

filipesilva commented Jan 27, 2017

brendenpalmer commented Jan 27, 2017

filipesilva commented Jan 28, 2017

cjmosure commented Feb 14, 2017

alfupe commented Feb 14, 2017

cjmosure commented Feb 15, 2017

alfupe commented Feb 16, 2017

kaynz commented Feb 16, 2017 • edited Loading

alfupe commented Feb 16, 2017

kaynz commented Feb 16, 2017 • edited Loading

alfupe commented Feb 16, 2017 • edited Loading

kaynz commented Feb 16, 2017

alfupe commented Feb 16, 2017

BenRacicot commented Apr 5, 2017

KoziukSerhiy commented May 18, 2017 • edited Loading

Avien commented May 18, 2017 • edited Loading

codestothestars commented May 18, 2017

smlombardi commented May 25, 2017 • edited Loading

rsbrodie commented Jun 12, 2017

rwngallego commented Jul 15, 2017

BenRacicot commented Jul 19, 2017

Tenemo commented Sep 18, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

retallicka commented Sep 8, 2016 •

edited

Loading

ggedde commented Oct 22, 2016 •

edited

Loading

aL3891 commented Jan 3, 2017 •

edited

Loading

marekstabla commented Jan 25, 2017 •

edited

Loading

kaynz commented Feb 16, 2017 •

edited

Loading

kaynz commented Feb 16, 2017 •

edited

Loading

alfupe commented Feb 16, 2017 •

edited

Loading

KoziukSerhiy commented May 18, 2017 •

edited

Loading

Avien commented May 18, 2017 •

edited

Loading

smlombardi commented May 25, 2017 •

edited

Loading