如何从Angular2组件styleUrls中获取源图

Question

我正在使用Typescrypt开发我的第一个Angular2应用程序。以下是组件的示例：

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

由于我必须处理SASS文件以获取特定于组件的CSS，因此我创建了以下Gulp任务：

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

正如您所见，我正在使用sourcemaps Gulp plugin来映射样式的源文件。

据我所知，Angular会在HTML <style>元素中注入组件CSS文件。因此，源映射似乎不适用于这个原因。

您知道映射CSS的任何解决方法吗？我想弄清楚为什么我在浏览器的检查工具中看不到源文件（.scss）。 sourcemaps插件有什么问题？

Answer 1

答案是我们目前无能为力。功能请求仍在Angular2 Github存储库中打开：

Answer 2

取自此SO answer和本文https://medium.com/@IMM9O/angular-cli-some-special-cases-f48059fb33e5

ng serve上的这些标记包括源图。

ng serve -sm -ec

或

ng serve --sourcemap --extractCss

它不包括组件样式表的源映射，正如您所要求的那样，但仅适用于angular-cli.json配置文件中包含的全局样式表。它仍然比没有好，特别是因为在检查元素时，你可以推断出唯一没有映射到源文件但是<style>标签的CSS是组件样式表的CSS。

我正在使用angular-cli版本1.0.0-rc.4