AngularJS 2 styleUrls：連結はどうですか？

Question

私のAngularJS 2アプリケーションには、gulpタスクで連結するいくつかのスタイルファイルがあります。それは大丈夫です。プロダクションでブラウザに送る大きなファイルに終わるからです。私の質問は、Angular 2 @ComponentとそのstyleUrls属性についてです。

@Component({ 
    selector: 'hero', 
    templateUrl: 'hero/hero.template.html', 
    styleUrls: ['hero/hero.component.css'], 

    inputs: ['hero'] 
}) 

hero/hero.component.cssで定義されたスタイルは、私だけがしたいだけのようコンポーネントに適用されるデフォルトモード（エミュレート）でDOMエミュレーションをシャドウに感謝します。私の質問は、連結でどうなるでしょうか？ styleUrlsで指定されたCSSファイルをすべてバンドルすることはできません。なぜなら、カプセル化の目的を破るからです。コンポーネントのスタイルがドキュメント全体に漏れることになります。しかし、コンポーネントが必要とするすべてのCSSファイルについて、本番環境での呼び出しを希望しません。これらのスタイルをどのように連結して（おそらくそれらを縮小して）、クライアントが1回の呼び出しですべてを取得し、カプセル化を保持できるようにするにはどうすればいいですか？

Answer 1

システムjsプラグインを使用して、テンプレートファイルとCSSファイルをjsファイルにバンドルすることができます。まあ

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

import html from './hero/hero.template.html!text'; 
import css from './hero/hero.component.css!text'; 

@Component({ 
    selector: 'hero', 
    template: html, 
    styles: [css], 
}) 
export class HeroComponent implements { 
}