如何使用Angular2组件打包样式?

时间:2016-02-04 00:41:47

标签: css sass angular

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

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

1 个答案:

答案 0 :(得分:4)

您在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