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

可以使用系统 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 {
}