Question

首先，我是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 - body {background-color：color1;}

users.css.scss - body {background-color：color2;}

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

Answer 1

Rails guide on how to use the asset pipeline并不完全说明这一点。它说：

您应该将任何JavaScript或CSS唯一的控件放入其各自的资产文件中，因为这些文件可以仅为这些控制器加载，例如＆lt;％= javascript_include_tag params [：controller]％＆gt;或＆lt;％= stylesheet_link_tag params [：controller]％＆gt;。

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

您需要从 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 中，就像默认情况下那样。将为每个页面加载所有样式，但仅适用特定于控制器的样式。

Answer 2

在Rails 4.x

中

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

config.assets.precompile＆lt;＆lt; “*的CSS”

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

2 个答案: