Wählen Sie zwischen verschiedenen Stil für eine Ember.JS-Anwendung

Question

Das Problem, das ich habe, ist, dass ich keinen Weg finden, um den CSS-Stil in meiner Anwendung zu ändern.

Die Sache, auf die ich zugreifen möchte, ist zum Beispiel: Ich habe ein rotes Thema, aber ich möchte, dass der Benutzer ein anderes vordefiniertes Thema wählen kann, wie ein grünes oder ein blaues Thema.
Die Idee ist, dass ich unterschiedliche app.css habe, wie kann ich zwischen einander ändern, kann ich nicht Methode finden, dies zu tun. Vielleicht kann ich es in meinem environment.js tun?
Irgendwelche Tipps wird geschätzt.
tl; dr: Wie stellen Sie mehrere CSS-Stil in unserer Ember.JS App?

Answer 1

Sie können dies erreichen, indem mehrere Stylesheets erzeugen, finden Sie unter: https://ember-cli.com/asset-compilation#configuring-output-paths

I ember-cli-head mit empfiehlt ein bestimmtes Verbindungselement mit dem zusätzlichen Thema Sheet hinzuzufügen. Sie könnten das Stylesheet in Ihrem head.hbs unter Verwendung des headData Dienstes einstellen.

Voll Beispiel:

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' ] 
    } 
}) 

head.hbs

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

some-component.js (oder Strecke oder was auch immer)

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

    actions: { 
    setTheme(themeName) { 
     this.set('headData.theme') 
    } 
    } 
})