css - 如何从 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 中注入(inject)组件 CSS 文件 <style>元素。因此，由于这个原因，源映射似乎不起作用。

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

Answer 1

答案是目前我们无能为力。功能请求在 Angular2 Github 存储库上仍然是开放的:enter link description here