Angular 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而不是将其放置在整个地方。