Ionic 2でのみ1ページにCSSを追加

Question

Ionic 2ページ固有のSCSSファイルでスタイルコードを/app/pages/page-name/page-name.scssに書き込んでから、/app/theme/app.core.scssにこれらへのリンクを含めることができます。しかし、このようにページ固有のスタイル・コードは完全なアプリ・スタイル・ファイルに入り、多くのユーザーが決してアクセスできないページであってもそのサイズを大きくします。

どのように私は1つの特定のページに含まれているスタイルのコードを（それ自身のCSS/SCSSファイル内、またはレンダリングされたページ内のスタイルブロック内のいずれか）を作成することができますか？これはIonicでもお勧めですか？

Answer 1

イオンではお勧めしません

とスタイルは、その後縮小さあり、最終的なスタイルファイルのサイズは、（多くのこと削減されることはありませんので、私は本当に、ということをやっての利点だか理解していませんあなたは多くのことをに変更して、を試してみてください）。

scssファイル（1つのページに属しています）を作成するために、デフォルトで動作する方法を変更する（1つのファイルにすべてのスタイルを縮小してまとめて変更する）ために、gulpfile.jsを変更することもできます（www/stylesフォルダにある）ページごとに単一cssファイルにコンパイルされ、その後、

<link md-href="styles/pageStyle.css" rel="stylesheet">

と各ionic page's htmlでそれらをインポートするイオンアプリが取得するので、あなたはhtml pageのbody（でこれらのスタイルをインポートする必要があります内にロードされた（index.htmlページのbodyの内部にある）。

最近のすべてのブラウザで動作するhereが表示されていますが、それはIonicで動作する推奨された方法ではないと確信しています。

Answer 2

angular2ドキュメントを参照してくださいが、それはgulpfileを変更せずにURLテンプレートで動作しますが、これは取得する必要はないことを確認あなたが開始
=>https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

@Component({ 
    selector: 'hero-app', 
    template: ` 
    <h1>Tour of Heroes</h1> 
    <hero-app-main [hero]=hero></hero-app-main>`, 
    styles: ['h1 { font-weight: normal; }'], 
    directives: [HeroAppMainComponent] 
}) 

または特定のURL

@Component({ 
    selector: 'hero-details', 
    template: ` 
    <h2>{{hero.name}}</h2> 
    <hero-team [hero]=hero></hero-team> 
    <ng-content></ng-content> 
    `, 
    styleUrls: ['app/hero-details.component.css'], 
    directives: [HeroTeamComponent] 
})