css - Angular 2 css 模块

Question

我试过用

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

这很好用，angular 使用属性选择器扩展每个类并赋予每个 DOM 元素唯一的属性。但是当会有很多 CSS 模块（例如 20 个组件和每个组件大约 100 行 CSS 代码）时，应用程序会快速加载吗？

Answer 1

当涉及到组件 css 时，您不希望有任何重复，它重复并且维护起来很痛苦。建议您找到最顶层的组件或包含您要设置样式的所有子组件的父组件并定义您的样式。使用外部文件或将它们内联定义由您决定。然后在组件装饰器中将encapsulation属性设置为ViewEncapsulation.None这意味着所有子组件都将继承父组件样式，并且您可以维护一点 css 而不是到处都是。