角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而不是將它放在整個位置。