Skip to content

Css sourcemaps are not loaded / displayed when using styleUrls: [...] #9664

Description

@nschipperbrainsmith

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request
[ ] support request

Current behavior
When using the styleUrls to load a stylesheet with ecapsulation: ViewEncapsulation.None it does not properly load the sourcemap that is associated with it. Nor does it work when using inline css sourcemaps.

Expected/desired behavior
It should within the browser show the sourcemap of the css when opening the development tools. Just like it does when you use sourcemaps normally within inline <style> tags.

Reproduction of the problem
Within the plunker example below you can see that the native implementation works yet when the style is specified using:

@Component({
  selector: 'my-app',
  moduleId: __moduleName,
  styleUrls: ['style.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [],
  template: `<div class="test"> I should be blue </div>`
})
export class App {

It no longer works and the source map is not linked to the css that is inlined.

Plnkr link
https://plnkr.co/edit/skKLA7oxnVTSmIkI2ipw?p=preview

What is the motivation / use case for changing the behavior?

This would make it possible to more easily include style sheets for specific routes while making sure a Frontend designer can alter the sass without requiring him/her to constantly search for the sass that is associated with the inline css.

Please tell us about your environment:

Windows 10 Version 1511

  • Angular version: 2.0.0-rc.3
  • Browser: [all]
  • Language: [all]

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureLabel used to distinguish feature request from other issues

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions