2017-10-09 163 views
2

工作,我有問題,SCSS。我有項目組件,它包含在他的html代碼4 app-tile's中。我有不同的類重定向到每個圖塊和 這project.component.html代碼的樣子:角2/4和SCSS語法不與構建督促

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

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

+0

你能提供你的'.css'文件的路徑? –

+0

更新:問題是,當我嘗試建立與--prod項目,爲有特殊類(.A,.B,.C,.D).tile樣式不加載。 –

+0

好的,你的樣式文件位於哪裏?在'assets'文件夾下或'styles.css'下 –

回答

0

試試這個:

.a { color: red; } 

.b { color: blue; } 

.c { color: green; } 

.d { color: purple; } 
+0

我試過了,但它甚至不能用ng服務。 –

0

答案是,加

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

到project.component。