2017-09-28 6 views
1

私の問題は、アプリケーション内でCSSスタイルを変更する方法が見つからないということです。Ember.JSアプリケーションのスタイルを変更する

私がアクセスしたいものは、たとえば:赤色のテーマがありますが、ユーザーは緑色のテーマや青いテーマのような他の定義済みのテーマを選択できます。
私は別のapp.cssを持っていると思いますが、どうすれば相互に変更できますか?そうする方法が見つけられません。多分私は私の中でそれをすることができますenvironnement.js
ヒントが表示されます。
tl; dr:Ember.JSアプリで複数のCSSスタイルを設定するにはどうすればよいですか?私は、追加のテーマスタイルシートを使用して、特定のリンク要素を追加するember-cli-headを使用することをお勧めhttps://ember-cli.com/asset-compilation#configuring-output-paths

答えて

1

あなたが見る、複数のスタイルシートを生成することによって、これを達成することができます。 headDataサービスを使用してhead.hbsにスタイルシートを設定できます。

フル例:head.hbs

{{#if theme}} 
    <link rel="stylesheet" href="/assets/{{theme}}.css"> 
{{/if}} 

some-component.js

ember-cli-build.js

var app = new EmberApp({ 
    outputPaths: { 
    app: { 
     css: { 
     // app/styles/red.css 
     'red': '/assets/themes/red.css' 
     } 
    } 
    }, 
    // Exclude theme css files from fingerprinting, 
    // otherwise your file is named `red-somehash.css` 
    // which we don't (easily) now at runtime. 
    fingerprint: { 
    exclude: [ 'red.css' ] 
    } 
}) 

(又はルートまたは任意)

export default Ember.Component.extend({ 
    headData: Ember.inject.service(), 

    actions: { 
    setTheme(themeName) { 
     this.set('headData.theme') 
    } 
    } 
}) 
関連する問題