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

난 구성 요소 별 CSS를 얻을 수 SASS 파일을 처리해야하기 때문에, 나는 다음과 같은 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/')); 
}); 

e sourcemaps Gulp plugin을 사용하여 스타일의 소스 파일을 매핑합니다.

내가 아는 한 Angular는 요소 CSS 파일을 HTML <style> 요소에 삽입합니다. 따라서 소스 매핑이 이러한 이유로 작동하지 않는 것 같습니다.

CSS 매핑에 대한 해결 방법을 알고 계십니까? 나는 왜 브라우저의 검사 도구에서 소스 파일 (.scss)을 볼 수 없는지 알아챌 것이다. sourcemaps 플러그인의 문제점은 무엇입니까?

Answer 1

대답은 우리가 지금 할 수있는 것이 아무것도 없다는 것입니다. 이 기능 요청은 여전히 ​​Angular2 Github의 저장소에서 열려 :

Answer 2

enter link description here이 SO answer에서 촬영이 기사 ng serve가 sourcemaps을 포함에 https://medium.com/@IMM9O/angular-cli-some-special-cases-f48059fb33e5

이러한 플래그. 당신이 그러나 단지 angular-cli.json 설정 파일에 포함되어있는 글로벌 스타일에 대해 물었다으로

ng serve -sm -ec 

또는

ng serve --sourcemap --extractCss 

그것은 구성 요소에 스타일 시트의 소스 맵을 포함하지 않습니다. 특히 요소를 검사 할 때 원본 파일에 매핑되지 않고 <style> 태그에 매핑 된 유일한 CSS가 구성 요소의 스타일 시트 CSS라고 추론 할 수 있기 때문에 여전히 아무것도없는 것보다 낫습니다.

난 각도 cli 버전을 사용하고 있습니다. 1.0.0-rc.4