Angular 2 cli SCSS/CSS訂單

Question

我試圖找出它的所有編譯後Angular 2對其Css使用的順序。

我想解決的是它從各個組件獲取所有SCSS文件，然後將它們添加到主styles.scss文件之後？這似乎是顯而易見的事情，但它是否倒過來，先把組件樣式放到主要樣式上？

我知道如果我在angular-cli.json文件的styles數組中指定文件，Angular將按照該順序處理它們，但顯然組件樣式在那裏沒有指定。

道歉，如果這聽起來有點奇怪，但我不能解決它，似乎無法找到任何信息。

Answer 1

您可能需要了解ViewEncapsulation如何工作以及其他一些事情。這可能幫助：

https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

Answer 2

一般來說，我們沒有確保一個給定的順序風格。組件樣式（默認爲）將獨立於其他組件中的其他樣式以及處理樣式的順序工作。

CLI中的Sass文件的處理順序爲不保證，有一個順序是CLI插件（基於Webpack的）處理文件的順序，但隨着CLI的發展它可能隨時間而改變。

角度造型的主要目標之一是提供風格封裝，這意味着與該組件關聯的SASS文件上的樣式僅適用於該樣式。

要理解它是如何工作的，以及爲什麼在一般我們並不需要擔心的風格順序，讓我們以一個例子這種風格在組件SASS文件：

.active { 
    border-radius:4px; 
} 

這將轉化在運行時是這樣的：

.active[_concontent-c1] { 
    border-radius:4px; 
} 

尖括號內善有善報是獨特屬性標識符增加的風格和保證的特殊性它僅適用於該特定組件的模板內的元素。

該機制的主要優點之一是組件樣式處理的順序不是關鍵，因爲唯一標識符將確保它們不會干涉。

注：有辦法沒有，如果需要

看一看這個video看到這一機制的行動的更多細節應用到風格獨特的ID。