如何在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中的整个目录?