rails 3中的控制器特定样式表：继承答案

【问题标题】：Controller specific stylesheets in rails 3: Inheritencerails 3中的控制器特定样式表：继承
【发布时间】：2013-04-29 11:43:07
【问题描述】：

首先，我是 Rails 的新手。我正在开发一个 Rails 网站。它具有三个控制器，即 application_controller、static_pages_controllers 和 users_controller。它们在 app/assets/stylesheets/（application.css 和 users.css.scss）中都有各自的 css（scss）文件 除了 static_pages_controllers，还有一个 custom.css.scss 用于整体布局或通用元素。我使用了控制器特定的样式表，如前所述 here

我的问题是：

1) custom.css 中的 css 规则是否适用于所有控制器视图，除了我在单独的控制器 css 中明确定义的那些？

2) 如果是，那么我在 custom.css.scss 和 users.css.scss 中都定义了一个规则

custom.css.scss - 正文 { background-color:color1;}

users.css.scss - 正文 { background-color:color2;}

但 static_pages_controllers 和 users_controllers 中的视图仍然显示背景颜色 2。我哪里错了？只有 users_controller 中的视图必须显示 color2 而 static_pages_controller 必须显示 color1。

【问题讨论】：

页面（操作？）特定版本：stackoverflow.com/questions/15708794/…，然后被标记为 stackoverflow.com/questions/6167805/… 的副本（恕我直言）。
相关：stackoverflow.com/questions/15708794/…

标签： css ruby-on-rails sass

【解决方案1】：

在 Rails 4.x 中

你必须在 config/environment.rb 中添加这些行

config.assets.precompile

【讨论】：

【解决方案2】：

Rails guide on how to use the asset pipeline 在这里并没有完全说出真相。它说：

您应该将控制器特有的任何 JavaScript 或 CSS 放入它们各自的资产文件中，因为这些文件可以仅针对这些控制器加载，例如或 .

现在，您可以按照他们的建议为每个控制器加载特定的样式表，但不能按照他们的建议开箱即用。忽略了一些你必须做的事情。

您需要从 application.css 中删除 //= require_tree . 指令，该指令保留在原处，将加载文件夹中的所有其他资产。这意味着每个页面都会加载 users.css，如果您像他们的示例一样添加特定于控制器的样式表行，它将加载控制器样式表两次。

您需要告诉 Rails 预编译各个文件。默认情况下，预编译器会忽略除 application.css 之外的所有 *.css 文件。要解决此问题，您必须编辑配置以执行以下操作：

# in environments/production.rb
# either render all individual css files:
config.assets.precompile << "*.css"
# or include them individually
config.assets.precompile += %w( users.css static_pages.css )

最后，按照 Rails 指南的指示，您需要更改样式表包含的内容，如下所示：

<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>

<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>

但是， 以上可能并不是真正的最佳做法。当然，有时您可能需要单独的样式表，但大多数时候您可能只想提供样式包，以便客户端可以缓存一个文件。毕竟，这就是资产管道开箱即用的工作方式。

除此之外，如果您只是在控制器特定的样式表中添加覆盖规则，那么您将创建一个加载顺序特定的样式缠结。这……可能不太好。

更好的方法可能是在控制器表中为样式命名，如下所示：

// in application.css (or some other commonly loaded file)
background-color: $color1;

// in users.css.scss
body.controller-users {
  background-color: $color2;
}

// and so on...

然后在您的布局中，将控制器名称添加到 body 类中，例如：

<body class="controller-<%= params[:controller] %>">

通过这种方式，您的样式由命名空间解析，而不仅仅是加载顺序。此外，使用此解决方案，如果您愿意，您仍然可以继续加载单独的特定于控制器的样式表，或者您可以忘记这一点，只将所有内容编译到 application.css 中，就像默认情况下一样。将为每个页面加载所有样式，但仅应用特定于控制器的样式。

【讨论】：

这是一个很好的答案，更重要的是因为它需要一个很好的实践，在这个社区中普遍共享，它显示了它的缺点，它提出了一个更好的选择。非常感谢！！