使用bootstrap sass gem,如何将样式限制为一个页面/视图?
例如,我使用gem构建了一个应用程序,一切都很好。我创建了一个测试视图,并添加了Bootstrap封面页(链接)的代码。为了获得正确的样式,我将cover.css文件导入到我的资产中,并在application.scss中调用它,如下所示:
@import "cover";
然而,这产生的影响是,它是全球性的,我所有的观点都是这样的。如何将样式限制为index.html.erb之类的内容?
你非常接近。
根据您的评论,您可能有一个包含行<%= stylesheet_link_tag 'application', media: 'all' %>
的.../app/views/layouts/application.html.erb
。这很好,因为它可能涵盖了所有常见样式的页面(因为布局视图提供了基本模板)。或者,如果你的每一页都没有通用的布局,那么这一行也可以出现在它们中,但通常不那么枯燥。
为了限制一种风格,可以像你在OP中建议的那样,用单行@import "cover";
制作一个单独的cover_set.scss
。(还有其他方法,但这种方法一定会引入.scss
。如果你不想要或需要部分配方,你可以直接使用原始的cover.scss
。)
然后,在要应用该样式的视图中,使用以下片段:
<% content_for :header do -%>
<%= stylesheet_link_tag 'cover_set', media: 'all' %>
<% end -%>
如果您只想直接使用原始的cover.scss
,那么只需使用cover
而不是上面的cover_set
。
content_for
结构适用于javascript和您想要放入<HEAD>
标记中的任何其他内容。