条件加载样式表

Question

我有一个客户网站.每个客户端都可以拥有自己的主题,当某个客户端的用户登录时,必须加载公司主题.在application.css.scss中,每个公司都有这样的行:

@import "_theme_x.css.scss";
@import "_theme_y.css.scss";
@import "_theme_z.css.scss";

当公司x的用户登录而不加载theme_y和theme_z时,如何仅加载例如theme_x？或者有更好的方法吗？谢谢!

Answer 1

如果主题很大,您可能希望将它们与application.css分开,并在布局中有条件地加载它们.例如,如果您theme_stylesheet在application_helper中有一个帮助器,它返回客户端正在使用的主题的名称:

# application.html.erb
<%= stylesheet_link_tag 'application', theme_stylesheet %>

如果它们很小,我喜欢命名空间.保持application.css不变,但修改主题以在主体上使用顶级规则.在主体上放置一个标签以选择主题.这样的美妙之处在于你可以动态地改变主题.

<body class="theme-<%= theme_stylesheet %>">
  ...
</body>

_theme_x.css.scss

body.theme-x {
  ...
}