如何添加css到離子2組件模板

我想將CSS添加到此代碼，但我不想將它內聯。當我在scss類中對其進行更改時，它似乎並未應用於元素上。如何添加css到離子2組件模板

這是HTML

<ion-content #popoverContent class="popover-page"> 

<div id="map" #popoverText ></div>

這是當.ts文件

@Component({ 
template :` 
<ion-list> 
    <ion-list-header>Ionic</ion-list-header> 
    <button ion-item (click)="close()">Learn Ionic</button> 
    <button ion-item (click)="close()">Documentation</button> 
    <button ion-item (click)="close()">Showcase</button> 
    <button ion-item (click)="close()">GitHub Repo</button> 
</ion-list>` 
}) 

export class PopoverPage { 
constructor(public viewCtrl: ViewController) {} 

close() { 
this.viewCtrl.dismiss(); 
}

的popovercontent所以，當我改變了在.scss文件，它不會做任何事情

ion-list-header { 
    background-color: red; 
}

我真的不想添加內聯的CSS，任何人有關如何解決它的想法？

來源

2017-02-09 Anthony gesquière

在我的離子2應用程序中，'theme'文件夾中有'app.core.scss'文件。這裏你需要導入所有'.scss'文件。你能檢查它是否包括在內。如果是這樣，你可以檢查元素，並檢查'背景顏色'在哪裏優先？請回復你的發現。 :) –

嘗試在任何父標記中給出id。

@Component({ 
template :` 
<ion-list id="il1"> 
    <ion-list-header>Ionic</ion-list-header> 
    <button ion-item (click)="close()">Learn Ionic</button> 
    <button ion-item (click)="close()">Documentation</button> 
    <button ion-item (click)="close()">Showcase</button> 
    <button ion-item (click)="close()">GitHub Repo</button> 
</ion-list>` 
})

然後加入scss。

#il1{ 
    ion-list-header { 
    background-color: red; 
    } 
}

這將優先考慮。

來源

2017-02-09 12:00:02

沒有似乎沒有工作 –

它適用於我在我的項目。試着看看檢查/螢火蟲哪個css覆蓋它。如果只有必要，請添加！重要。並確保你沒有把上面的CSS放在任何其他類中。 –

如何添加css到離子2組件模板

回答

相關問題