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，而不是到处乱用。