Angular-cli: CSS Sourcemap is always empty

[changLiuUNSW]

My Angular-Cli version is 1.0.0-beta.26
Here is my angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.26",
    "name": "test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

And Here is my styles.scss

h1 {
    font-size: 20px;
}

When I type ng serve --extract-css=true or ng build --extract-css=true, the styles.bundle.map is always empty like:

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

Does anyone have the same issue with me ? Or maybe this is expected behavior ?

[changLiuUNSW]

I also tried ng serve --extract-css=true --sourcemap=true or ng build --extract-css=true --sourcemap=true, the result is still the same.

[filipesilva]

Bug I think. I have known about it for a while, but haven't had time to look at it yet.

[changLiuUNSW]

I think we should have e2e test to cover css sourcemap

[a5hik]

I'm facing the same issue, the css source map is empty.

[filipesilva]

Dupe of https://github.com/angular/angular-cli/issues/2020, fixed by https://github.com/angular/angular-cli/pull/4222.

[craigcosmo]

Are you sure it's fixed? I still have the issue. My command is like this

"start": "ng serve --port 1800 --extract-css=true --sourcemap=true",

And source map still not show up

demo: https://github.com/craigcosmo/yeahman-angular-cli-app

[changLiuUNSW]

@filipesilva Maybe we need to reopen this issue

[filipesilva]

Regarding component styles and sourcemaps, please see @asnowwolf's excelent explanation in https://github.com/angular/angular-cli/issues/3617#issuecomment-279412965.

The gist of it is that component styles atm cannot have style maps.

[changLiuUNSW]

The sourcemaps for global style seemed broken again

[filipesilva]

@changLiuUNSW can you show me a repro?

[changLiuUNSW]

@filipesilva https://github.com/changLiuUNSW/ng2Redux based on angular-cli 1.0.0-beta.32.3

[filipesilva]

@changLiuUNSW I tried your repo, serving with ng serve --extract-css, and I could see the sourcemaps for scss files:

[changLiuUNSW]

Yes, it works. I forget to put --extract-css
Thanks @filipesilva

[daddyschmack]

@filipesilva , HI, this is not working for me in v1.04. What steps do I need to troubleshoot? Or what do you need from me to troubleshoot?
I've tried:
ng serve -prod
I've tried :
ng serve --extract-css -sourcemap=true

My expectation is to see the component scss files mapped to the elements inspected in chrome developer tools. Please let me know if this is not the correct expectation.
BTW, TS source maps are working.

[asnowwolf]

@daddyschmack It's a reasonable expectation. But in fact, this issue is blocked by https://github.com/angular/angular/pull/16088 and https://github.com/angular/angular/pull/16090 .
In other words, currently, it's an issue of "angular", not "angular-cli"'s. You can go to vote to push them to be merged.
I've resolved the part of cli through a pull request to css-loader https://github.com/webpack-contrib/css-loader/pull/417 . So, just waiting for the angular repo.

[angular-automatic-lock-bot[bot]]

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