角度2/4とscss構文がビルドプロダクトで動作しない

Question

scssに問題があります。私は自分のHTMLコードに4つのapp-tileを含んでいるプロジェクトコンポーネントを持っています。

<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> 

今では奇妙な問題を私はproject.component.htmlコードがどのように見えるかだそのタイルと のそれぞれに異なるクラスをリダイレクトしています。私はそのフォームを使用する場合にのみタイルのスタイルは作品： tile.component.scss：

.a 
.tile { color: red; } 

.b 
.tile { color: blue; } 

.c 
.tile { color: green; } 

.d 
.tile { color: purple; } 

私は1行にセレクタを設定しようとすると、それは作品をdosent：

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

..but I完全になぜか分からないのですか？さて、最後の手段として構文を受け入れることができます。問題は、--prodを使ってプロジェクトをビルドしようとすると、特定のクラス（.a、.b、.c、.d）の.tileのスタイル）が読み込まれていない...誰かがこの状況を解決するのに私を助けることができますか？

EDIT：

私が設定している場合：

.a .tile { color: red; } 

を開発者ツール..in - >要素 - 私が見htmlコード：

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

しかし、私が設定：

.a 
.tile { color: red; } 

i got：

.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に追加します。