角2/4和SCSS語法不與構建督促

Question

工作，我有問題，SCSS。我有項目組件，它包含在他的html代碼4 app-tile's中。我有不同的類重定向到每個圖塊和 這project.component.html代碼的樣子：

<app-tile class="a"></app-tile> 
<app-tile class="b"></app-tile> 
<app-tile class="c"></app-tile> 
<app-tile class="d"></app-tile> 

Tile.component.html代碼：

<div class="tile"> 
    text 
</div> 

現在奇怪的問題。瓷磚的風格的作品，只有當我使用形式： tile.component.scss：

.a 
.tile { color: red; } 

.b 
.tile { color: blue; } 

.c 
.tile { color: green; } 

.d 
.tile { color: purple; } 

當我嘗試在一個行設置選擇它dosent工作：

.a .tile { ... } // bad way 

..但我完全不知道爲什麼？好吧，我可以接受的語法，作爲最後的手段它的作品。問題是，當我嘗試建立與--prod項目，爲有特殊類.tile的樣式（.A，.B，.C，.D ）沒有加載...有人可以幫我解決這種情況嗎？

編輯：

如果我設置：

.a .tile { color: red; } 

..in開發人員工具 - >元素 - HTML代碼中，我看到：

.a[_ngcontent-c11] .tile[_ngcontent-c11] { 
    color: red; 
} 

但是當我設置：

.a 
.tile { color: red; } 

我得到：

.a 
.tile [_ngcontent-c11] { color: red; } 

這是如何影響這個問題的？

Answer 1

試試這個：

.a { color: red; } 

.b { color: blue; } 

.c { color: green; } 

.d { color: purple; } 

Answer 2

答案是，加

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    ... 
}) 

到project.component。