角2个的CSS模块

Question

我试图使用

@Component({ 
    selector: 'about', 
    template: './about.hmtl', 
    styles: ['.block {background-color: red} ...'] // <-- This will generate css modules 
}) 

这工作得很好，角扩展与属性选择每个类和给每个DOM元素独特属性。但是，当应用程序加载很快时，会有很多css模块（例如，每个组件有20个组件和大约100行CSS代码）？

Answer 1

当谈到组件css你不想有任何重复，它的重复和它的一个痛苦来维护。建议您找到最顶层的组件或包含您想要设置样式的所有子组件的父组件，并定义您的样式。使用外部文件或将它们定义为内联。然后在组件装饰器中将encapsulation属性设置为ViewEncapsulation.None，这意味着所有子组件都将继承父组件样式，并且您可以保留一点css而不是将它放在整个位置。