Question

我正在开发一个应用程序，该应用程序将许多单独的“站点”呈现为子目录 - 例如/client/1，/client/2等。对于其中的每一个，都可以在应用程序的管理部分中指定两个颜色值。

我想知道是否有一种方法可以将最初发布到Ember的后端API中的值注入SCSS文件进行预处理？

到目前为止我找不到任何解决方案。

Answer 1

在我们的Ember / Rails应用程序中，我们根据数据库中的某些设置为每个客户端生成CSS文件。例如，我们的Tenant模型有两个字段：

{
    primary_color: 'ff3300',
    secondary_color: '00ff00'
}

我们公开路线

scope '/stylesheets', format: 'css' do
  get 'tenant/:tenant_id', to: 'stylesheets#tenant_css'
end

我们的控制器看起来像这样：

class StylesheetsController < ApplicationController

  layout nil

  rescue_from 'ActiveRecord::RecordNotFound' do
    render nothing: true, status: 404
  end

  def tenant_css
    # fetch model
    tenant = Tenant.find(params[:tenant_id])

    # cache the css under a unique key for tenant
    cache_key = "tenant_css_#{tenant.id}"

    # fetch the cache
    css = Rails.cache.fetch(cache_key) do
      # pass sass "params"
      render_css_for 'tenant', {
        primary_color: tenant.primary_color,
        secondary_color: tenant.secondary_color
      }
    end

    render_as_css css
  end

  protected

  # our renderer, could also add a custom one, but simple enough here
  def render_as_css(css)
    render text: css, content_type: 'text/css'
  end

  # looks for a template in views/stylesheets/_#{template}.css.erb
  def render_css_for(template, params = {})
    # load the template, parse ERB w params
    scss = render_to_string partial: template, locals: { params: params }
    load_paths = [Rails.root.join('app/assets/stylesheets')]
    # parse the rendered template via Saas
    Sass::Engine.new(scss, syntax: :scss, load_paths: load_paths).render
  end

end

这样，您就可以链接到/stylesheets/tenant/1.css，它将使用Sass引擎为租户呈现CSS。

在这种情况下，在views / stylesheets / _tenant.css.erb中，你会有这样的东西（它是一个ERB文件但你现在可以在那里使用Sass）：

@import "bootstrap-buttons";

<% if params[:primary_color].present? %>
  $primary-color: <%= params[:primary_color] %>;
  h1, h2, h3, h4, h5, h6 {
    color: $primary-color;
  }
<% end %>

<% if params[:secondary_color].present? %>
  $secondary-color: <%= params[:secondary_color] %>;
  a {
    color: $secondary-color;
    &:hover {
      color: darken($secondary-color, 10%);
    }
  }
<% end %>

您会注意到我现在可以使用@import导入Sass引擎的样式表路径中的任何内容（在这种情况下，我可以使用Bootstrap Sass lib中的一些帮助程序）。

当您支持CSS的模型更新时，您需要使用某种缓存清理来擦除缓存：

class Tenant < ActiveRecord::Base
  after_update do
    Rails.cache.delete("tenant_css_#{id}")
  end
end

简而言之，这就是Rails方面。

在Ember中，我的猜测是你想要根据ID加载样式表，这样样式表就不能硬编码到“index.html”中。 Ember CSS Routes插件可能很适合您，但我发现它只是将<link>附加到标头上，因此如果您需要随时交换CSS样式表，这将无效。我在这样的路线中解决了这个问题：

afterModel(model, transition) {
  // dynamically form the URL here
  const url = "/stylesheets/tenant/1";

  // build link object
  const $link = $('<link>', { rel: 'stylesheet', href: url, id: 'tenant-styles' });

  // resolve the promise once the stylesheet loads
  const promise = new RSVP.Promise((resolve, reject) => {
    $link.on('load', () => {
      $link.appendTo('head');
      resolve();
    }).on('error', () => {
      // resolve anyway, no stylesheet in this case
      resolve();
    });
  });

  return promise;
},

// remove the link when exiting
resetController(controller, isExiting, transition) {
  this._super(...arguments);
  if (isExiting) {
    $('#tenant-styles').remove();
  }
}

您还可以在<head>中添加空白元素，然后使用Ember Wormhole格式化<link>标记并渲染到“虫洞”中。

修改

您还可以查看rendering Sass directly in the client application。对于像两种颜色这样简单的东西，这不会对性能产生太大影响，特别是如果您使用服务工作者或类似工具来缓存结果。

在Ember应用程序中将数据注入Sass变量

1 个答案: