如何在Rails 3.2.1中使用特定于控制器的样式表?

使用Rails 3.2.1


我使用命令创建了一个名为Home的简单控制器:

rails g controller Home index 

它为我创建了一个新的控制器和视图:

在此处输入图像描述

注意有两个样式表,一个是“应用程序”,另一个是“主页”。 我找不到任何文档来支持这个假设,但我猜你把样式只应用于Home.css.scss文件中的“Home”视图,对吗?

因此,作为测试,我在Application.css.scss.erb中添加了一些全局样式并运行了应用程序。

样式按预期应用。

接下来,我在Home.css.scss文件中添加了一些规则,并访问了“Home / index”视图,但该文件中的样式未附加,既不作为单独的CSS引用链接,也不附加到单个Application.css.scss文件。 这对我来说非常困惑,因为评论说:

 // Place all the styles related to the Home controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ 

为什么Home.css.scss中写的规则不适用于我的网站?

我不认为它的工作方式( Home.css仅适用于Home控制器操作)。 不同的文件仅用于分离,以便更清楚地描述什么是CSS规则。 您可以阅读有关资产管道的本指南 。 我猜你改变了默认的application.css.scss并删除了从app/assets/stylesheets导入所有CSS文件的行。

它可以这样工作,马雷克是非常正确的,答案在指南中。 在2.1节的介绍中 :

例如,如果您生成ProjectsController ,Rails还将在app/assets/javascripts/projects.js.coffee添加一个新文件,在app/assets/stylesheets/projects.css.scss添加另一个文件。 您应该将任何JavaScript或CSS唯一的控件放在各自的资产文件中,因为这些文件可以仅为这些控制器加载,例如<%= javascript_include_tag params[:controller] %><%= stylesheet_link_tag params[:controller] %>

因此,要将应用程序设置为加载控制器特定的样式表:

首先,通过删除application.css清单中的任何额外要求来禁用所有样式表的默认加载。

通常,您会看到如下条目:

  *= require_tree . 

如果您仍想加载一些常见的css文件,可以将它们移动到子目录并执行以下操作:

  *= require_tree ./common 

其次,在您的应用程序的布局中添加建议的stylesheet_link_tag,例如

 <%= stylesheet_link_tag "application", :media => "all" %> <%= stylesheet_link_tag params[:controller] %> 

在此示例中,我们首先加载应用程序css文件,然后加载与当前控制器名称匹配的任何css文件。

我用一个简单的解决方案解决了这个问题。 我将控制器名称添加为body ,编辑views/layouts/application.html.slim

 body class=controller.controller_name 

或者views/layouts/application.html.erb

  

然后在我的CSS中我只使用body.controller_name作为命名空间

 /* example for /users/ */ body.users { color: #000; } body.users a { text-decoration: none; } 

对于小型项目,我认为这很好。

TL; DR:

忽略评论,这不是Sass做的。 但是把: @import "*"; 进入你的application.css.scss文件,它将自动导入所有控制器scss文件。

完整阅读:

免责声明:这是我目前对有和没有Sass的资产管道流程的理解。

我认为这个评论是由标准的Rails Asset管道(链轮)编写的,而不是由Sass编写的:

 // Place all the styles related to the Home controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ 

标准管道将处理scss文件,但不会假定application.css。 scss文件。 但是如果你用Sass创建这样一个文件,那么Sass会将它编译成application.css文件。

如果您使用普通的Rails资产管道,而不使用Sass,则sprockets会自动将css文件加载到application.css文件中(如果该文件中包含默认的*= require_tree .行)。

当您使用Sass时,使用application.css。 scss文件,Sass会将此文件编译成application.css文件。 (我假设它会覆盖或优先于你已经拥有的任何application.css文件)。

要自动包含home.css.scss文件(和其他控制器文件),请将此行放入application.css.scss文件中:

 @import "*"; 

供参考,请参阅此问题: 是否可以使用@import导入sass中的整个目录?