Css 如何从Angular2组件样式URL中获取源映射

我正在用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 {
}

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

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

gulpfile.js

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

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

export class HomeComponent {
}

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

如您所见，我正在使用映射样式的源文件

据我所知，Angular在HTML

元素中注入组件CSS文件。因此，源映射似乎无法为此工作

---

你知道映射CSS的方法吗？我会找出为什么在浏览器的检查工具中看不到源文件（

.scss

）。sourcemaps插件有什么问题吗？

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

摘自本文和本文

ng serve上的这些标志包括源地图

ng serve -sm -ec

或

正如您所要求的，它不包括组件样式表的源映射，只包括

angularcli.json

config文件中包含的全局样式表。这仍然比什么都不做要好，特别是在检查元素时，可以推断出唯一没有映射到源文件但映射到

标记的CSS是组件样式表的CSS

---

我使用的是angular cli版本

1.0.0-rc.4

，从6.x开始这就过时了。看看吧。