5

首先,我是 Rails 的新手。我正在开发一个 Rails 网站。它具有三个控制器,即 application_controller、static_pages_controllers 和 users_controller除了 static_pages_controllers 之外,它们在 app/assets/stylesheets/ (application.css 和 users.css.scss) 中都有各自的 css (scss) 文件, 并且还有一个用于整体布局或公共元素的 custom.css.scss。我使用了特定于控制器的这里提到的样式表

我的问题是:

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

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

custom.css.scss - 正文 { 背景颜色:颜色 1;}

users.css.scss - body {背景颜色:color2;}

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

4

2 回答 2

39

关于如何使用资产管道的Rails 指南在这里并没有完全说明真相。它说:

您应该将控制器特有的任何 JavaScript 或 CSS 放入它们各自的资产文件中,因为这些文件可以仅针对这些控制器加载,例如 <%= javascript_include_tag params[:controller] %> 或 <%= stylesheet_link_tag params[ :控制器] %>。

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

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

  2. 您需要告诉 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 )
    
  3. 最后,按照 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 class="controller-<%= params[:controller] %>">

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

于 2013-05-05T22:06:13.130 回答
0

在 Rails 4.x 中

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

config.assets.precompile << "*.css"

于 2015-06-19T07:07:58.047 回答