CODEWITHSUNDEEP
cssangularsassgulpsource-maps
smartmouse
smartmouse

Reputation: 14404

How to get sourcemaps out of Angular2 component styleUrls

i'm developing my first Angular2 app with Typescrypt. Here is an example of Component:

home.component.ts

import {Component} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.css']
})

export class HomeComponent {
}

Since i have to process SASS files to get component-specific CSS, i created the following Gulp task:

gulpfile.js

gulp.task('create:styles', function(cb) {
  return gulp.src('src/app/**/*.scss')
             .pipe(sourcemap.init())
             .pipe(sass().on('error', sass.logError))
             .pipe(sourcemap.write())
             .pipe(gulp.dest(paths.dist + '/app/'));
});

As you can see i'm using sourcemaps Gulp plugin to map source files of styles.

As far as i know Angular injects component CSS files in HTML <style> element. So source mapping seems not to work for this reason.

Do you know any workaround to map CSS? I would figure out why i can't see the source files (.scss) in the inspection tools of browsers. What's wrong with sourcemaps plugin?

Upvotes: 3

Views: 1484

Answers (2)

Quentin
Quentin

Reputation: 1135

Taken from this SO answer and this article https://medium.com/@IMM9O/angular-cli-some-special-cases-f48059fb33e5

These flags on ng serve include sourcemaps. 

ng serve -sm -ec

Or 

ng serve --sourcemap --extractCss

It does not include source maps for the components stylesheets, as you asked, but only for global stylesheets that are included with the angular-cli.json config file. It's still better than nothing, especially because when inspecting an element, you can infer that the only CSS that is not mapped to a source file but to a <style> tag is the CSS of the component's stylesheet.

I'm using angular-cli version 1.0.0-rc.4

Upvotes: 0

smartmouse
smartmouse

Reputation: 14404

The answer is that there is nothing we can do at the moment. The feature request is still open on Angular2 Github repository: enter link description here

Upvotes: 1

Related Questions