为 Ember.JS 个应用程序选择不同的样式

Question

我遇到的问题是我无法在我的应用程序中找到 'change' css 样式的方法。

例如，我想要访问的内容是：我有一个红色主题，但我希望用户可以选择其他预定义的主题，例如绿色或蓝色主题。
这个想法是我有不同的app.css，我怎么能在彼此之间改变，我找不到这样做的方法。也许我可以在 environnement.js?
感谢任何提示。
tl;dr：如何在我们的 Ember.JS 应用程序中设置多个 css 样式？

Answer 1

您可以通过生成多个样式表来实现此目的，请参阅：https://ember-cli.com/asset-compilation#configuring-output-paths

我建议使用 ember-cli-head 添加带有附加主题样式表的特定 link 元素。您可以使用 headData 服务在 head.hbs 中设置样式表。

完整示例：

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（或路线或其他）

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

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

为 Ember.JS 个应用程序选择不同的样式

Choose between different style for an Ember.JS application

css

ember.js