使用Bootstrap-gem将CSS样式限制为一个页面/视图



使用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>标记中的任何其他内容。

最新更新