Angular 2 css 个模块

Question

我尝试使用

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

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

Answer 1

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

Angular 2 css 个模块

Angular 2 css modules

css

angular

css-modules