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'] 
}) 

Благодаря теневому DOM эмуляции в режиме по умолчанию (эмулируемый) стили, определенные в hero/hero.component.css применяются только к компоненту так же, как я хочу. Мой вопрос: что происходит с конкатенацией? Я не могу объединить все файлы CSS, указанные в нескольких styleUrls, так как мы побеждаем цель инкапсуляции: стили для компонента будут протекать во весь документ. Тем не менее, я не хочу, чтобы вы делали вызов в каждом файле CSS, который требуется компоненту. Как я могу объединить эти стили (и, возможно, их уменьшить), чтобы клиент получал их все за один вызов и все еще сохранял инкапсуляцию?

Answer 1

Файлы шаблона и css можно связать с файлами js с помощью системного 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 { 
}