Wie bekomme ich Quellmaps aus Angular2 Komponente styleUrls

Question

Ich entwickle meine erste Angular2 App mit Typescrypt. Hier ist ein Beispiel für den Bestandteil:

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

Da ich SASS Dateien zu verarbeiten bauteilspezifischen CSS zu bekommen, habe ich die folgende Gulp Aufgabe:

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/')); 
}); 

Wie Sie können sich e Ich verwende sourcemaps Gulp plugin, um Quelldateien von Stilen zuzuordnen.

Soweit ich weiß Angular injiziert Komponente CSS-Dateien in HTML <style> Element. Daher scheint das Quellmapping aus diesem Grund nicht zu funktionieren.

Kennen Sie eine Problemumgehung, um CSS zuzuordnen? Ich würde herausfinden, warum ich die Quelldateien (.scss) in den Inspektionstools von Browsern nicht sehen kann. Was ist los mit Sourmaps Plugin?

Answer 1

Die Antwort ist, dass wir im Moment nichts machen können. Das Feature-Request ist noch offen auf Angular2 Github-Repository: enter link description here

Answer 2

Entnommen aus diesem SO answer und dieser Artikel https://medium.com/@IMM9O/angular-cli-some-special-cases-f48059fb33e5

Diese Flags auf ng serve sourcemaps umfassen.

ng serve -sm -ec 

Oder

ng serve --sourcemap --extractCss 

sie enthält keine Quelle Karten für die Komponenten Sheets, wie Sie gefragt, aber nur für die globale Sheets, die mit der angular-cli.json Konfigurationsdatei enthalten sind. Es ist immer noch besser als nichts, vor allem, weil Sie beim Inspizieren eines Elements darauf schließen können, dass das einzige CSS, das nicht einer Quelldatei, sondern einem <style>-Tag zugeordnet ist, das CSS des Stylesheets der Komponente ist.

Ich verwende Winkel-cli Version 1.0.0-rc.4