如何使用 Angular2 组件打包样式？ [关闭]答案

【问题标题】：How to package styles with Angular2 components? [closed]如何使用 Angular2 组件打包样式？ [关闭]
【发布时间】：2016-05-13 10:42:11
【问题描述】：

使用 Angular 组件打包样式的推荐最佳做法是什么？在 Angular 2 之前，通常使用 sass/less 来模块化组件/指令，方法是将其样式保存在与 JavaScript 和 HTML 相同的文件夹中。但最后，构建过程会扫描整个源代码并将所有 JavaScript 打包到一个文件中（例如 bundle.js），并将所有 css 打包到一个文件中（例如 style.css）。换句话说，JS 和 CSS 是分开打包的，即使它们位于不同的源模块中。这仍然是 Angular 2 中的推荐方式还是其他方式？

另外，如何考虑全局样式/主题？例如，如果我使用一些材料设计库或引导程序，组件肯定会依赖这些。有 CSS 依赖的概念吗？

【问题讨论】：

我写了一个使用ng2-mean-webpack 入门工具包的教程。它展示了您要求查看的所有内容。 | davidniciforovic.com/2016/02/03/…
这是一个完全有效的问题-

标签： css sass angular

【解决方案1】：

您在 Angular 2 组件中使用的任何样式都可以来自您在 index.html 上引用的全局 css，这些样式可以像您以前一样作为包。

每个组件的样式仅在您正在构建要导出给其他人以开始使用的组件时才有用。

即使您可以引用文件并将其添加到捆绑器。

@Component({
    selector: "my-app",
    templateUrl: './app/app.component.html',
    styleUrls: ["./app/app.css"]    
})
export class AppComponent implements OnInit {
}

Great blog for Styling on Angular2

【讨论】：