Styl AngularJS 2: Co słychać w konkatenacji?

Question

Moja aplikacja AngularJS 2 ma kilka plików stylu, które łączę z zadaniem gulp. Wszystko w porządku, ponieważ trafią do dużego pliku, który wysyłam do przeglądarki w trakcie produkcji. Moje pytanie dotyczy atrybutu Angular 2 @Component i jego styleUrls.

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

    inputs: ['hero'] 
}) 

Dzięki cień DOM emulacji w trybie domyślnym (emulowane) style zdefiniowane w hero/hero.component.css są stosowane tylko do składnika, tak jak chcę. Moje pytanie brzmi, co dzieje się z konkatenacją? Nie mogę połączyć wszystkich plików CSS podanych w kodzie wielokrotnym styleUrls, ponieważ pokonamy cel enkapsulacji: style komponentu wyciekłyby do całego dokumentu. Nie chcę jednak wykonywać wywołań w produkcji dla każdego pliku CSS, którego potrzebuje dany komponent. Jak mogę połączyć te style (i ewentualnie je zminimalizować), aby klient uzyskał je wszystkie podczas jednego połączenia i nadal zachował enkapsulację?

Answer 1

Pliki szablonów i css można łączyć z plikami js przy użyciu wtyczki systemowej 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 { 
}