css - AngularJS 2 styleUrls : What's up with concatenation?

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 中定义的样式仅应用于我想要的组件。我的问题是，串联会发生什么？我无法捆绑多个 styleUrls 中指定的所有 CSS 文件，因为我们会破坏封装的目的:组件的样式会泄漏到整个文档。但是，我不想在生产环境中为组件需要的每个 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 {
}