样式表的条件加载 [英] conditional loading of stylesheet
问题描述
我有一个有客户的网站.每个客户端都可以有自己的主题，当某个客户端的用户登录时，必须加载公司主题.在 application.css.scss 中，我对每个公司都有这样的一行:
I have a site with clients. Every client can have it's own theme and when a user of a certain client is logged in, the company theme must be loaded. In the application.css.scss I have a line like this for every company:
@import "_theme_x.css.scss";
@import "_theme_y.css.scss";
@import "_theme_z.css.scss";
我怎样才能只加载例如当公司 x 的用户登录并且未加载 theme_y 和 theme_z 时，theme_x?或者有没有更好的方法来做到这一点?谢谢！
How can I load only e.g. theme_x when a user of company x is logged in and not load theme_y and theme_z? Or is there a better way of doing this? Thanks!
推荐答案
如果主题很大，您可能希望将它们从 application.css 中分离出来，并有条件地将它们加载到您的布局中.例如，如果您在 application_helper 中有一个 helper theme_stylesheet，它返回客户端正在使用的主题的名称:
If themes are large, you might want to separate them from the application.css and load them conditionally in your layout. For example, if you have a helper theme_stylesheet in application_helper which returns the name of the theme the client is using:
# application.html.erb
<%= stylesheet_link_tag 'application', theme_stylesheet %>
如果它们很小，我喜欢命名空间.保持 application.css 不变，但修改主题以在主体上使用顶级规则.在正文上放置一个标签以选择主题.这样做的好处是您可以动态更改主题.
If they are small, I like namespacing. Leave your application.css as-is, but modify the themes to use a top-level rule on the body. Place a tag on the body to select the theme. The beauty of this is you can dynamically change the theme.
<body class="theme-<%= theme_stylesheet %>">
...
</body>
_theme_x.css.scss
_theme_x.css.scss
body.theme-x {
...
}
这篇关于样式表的条件加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
