在轨道中链接样式表的最有效位置

Question

我一直在争论这个问题，但仍然不太确定链接样式表的合适位置。我让样式表工作没有问题，但我想知道官方的"railsy"方法是什么。您是否在应用程序.html链接所有样式表？

当我创建一个新视图或视图目录时，我可能会创建一个样式表，其中包含该目录的所有样式。如果目录中有更精细的页面，我可以创建多个样式表，每个页面一个。现在，是否适合在应用程序布局中仅链接到这些样式，还是仅在使用stylesheet_link_tag加载视图时才加载它？

当我尝试在每次页面加载时加载样式时，它似乎更缓慢，但是通过将样式表包含在应用程序布局中来加载每个样式表感觉不对。

你如何链接你的样式表？

Answer 1

您可以使用

content_for添加这些样式并将它们设置在每个视图中。

应用.html.哈姆尔

%html
  %head
    %title YOUR_APP
    = stylesheet_link_tag 'application', media: 'all'
    = yield :stylesheet

application/home/index.scss

h2 {
  color: blue;
}

首页/索引.html.哈姆尔

= content_for :stylesheet, stylesheet_link_tag("application/home/index")

%h2
  My home index

应用程序.scss

@import 'base/base';
@import 'modules/module';

然后，它只会在您点击home#index页面时加载。通常我们会在application.scss中添加所有常见的 css（@import '..' 或 *= require ... ），并且只添加我们使用content_for添加的最具体的视图 css。