Question

我遇到的问题是我无法找到改变方法。我的应用程序中的CSS样式。

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

Answer 1

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

我建议使用ember-cli-head添加特定链接元素和其他主题样式表。您可以使用head.hbs服务在headData中设置样式表。

完整示例：

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应用程序选择不同的样式

1 个答案: