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

【问题标题】：Choose between different style for an Ember.JS application为 Ember.JS 应用程序选择不同的样式
【发布时间】：2023-03-09 02:36:01
【问题描述】：

我遇到的问题是我找不到在我的应用程序中“更改”css 样式的方法。

我想要访问的内容例如：我有一个红色主题，但我希望用户可以选择其他预定义主题，例如绿色或蓝色主题。
这个想法是我有不同的 app.css，我该如何在彼此之间进行更改，我找不到这样做的方法。也许我可以在我的 environnement.js 中做到这一点？
任何提示都值得赞赏。
tl;dr: 如何在我们的 Ember.JS 应用中设置多种 css 样式？

【问题讨论】：

标签： css ember.js

【解决方案1】：

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

我建议使用ember-cli-head 来添加带有附加主题样式表的特定链接元素。您可以使用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')
    }
  }
})

【讨论】：