Angular 2/4和scss语法不适用于build prod

Question

我有scss的问题。我有项目组件，它包含在他的html代码4 app-tile中。我已经将不同的类重定向到每个tile和  这就是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; }

当我尝试在一行中设置选择器时，它起作用：

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

..但我完全不知道为什么？好吧，我可以接受这种语法，作为最后的手段。它的问题是，当我尝试使用--prod构建项目时，.tile的样式具有特定的类（.a，.b，.c，.d） ）没有加载......有人可以帮助我解决这种情况吗？

编辑：

如果我设置：

.a .tile { color: red; }

..在开发者工具中 - ＆gt;元素 - 我看到的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。