如何在 Rails 3.2.1 中使用控制器特定的样式表？
Posted
技术标签:
【中文标题】如何在 Rails 3.2.1 中使用控制器特定的样式表？【英文标题】：How do I use Controller specific stylesheets in Rails 3.2.1? 【发布时间】：2012-03-03 22:51:11 【问题描述】：使用 Rails 3.2.1
我使用以下命令创建了一个名为 Home 的简单控制器：
rails g controller Home index
它为我创建了一个新的控制器和视图：
注意有两个样式表，一个“应用程序”和一个“主页”。我找不到任何文档来支持这个假设，但我猜你在 Home.css.scss 文件中放置了只会应用于“主页”视图的样式，对吗？
所以作为测试，我在 Application.css.scss.erb 中添加了一些全局样式并运行了应用程序。
按预期应用的样式。
接下来，我在 Home.css.scss 文件中添加了一些规则，并访问了“Home/index”视图，但该文件中的样式并未附加，既不是单独的 CSS 参考链接，也不是附加到单个 Application.css.scss 文件中。这让我很困惑，因为 cmets 说：
// 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 中编写的规则不适用于我的网站？
【问题讨论】：
【参考方案1】：它可以这样工作，Marek 是非常正确的，答案在指南中。 在introduction to section 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 文件。
【讨论】：
【参考方案2】：我用一个简单的解决方案解决了这个问题。我将控制器名称作为类添加到body，编辑views/layouts/application.html.slim：
body class=controller.controller_name
或views/layouts/application.html.erb:
<body class="<%= controller.controller_name%>">
然后在我的 css 中，我只使用 body.controller_name 作为 命名空间：
/* example for /users/ */
body.users
color: #000;
body.users a
text-decoration: none;
对于小型项目，我认为这很好。
【讨论】：
这也是 Sam Ruby 在《Agile Development with Rails 4》一书中的首选答案。如果您使用 scss 只需将整个代码包装在控制器名称中，例如 .body /*Entire css code in here*/【参考方案3】：我不认为它是这样工作的（Home.css 仅适用于 Home 控制器操作）。不同的文件只是为了分隔，以便更清楚地说明 CSS 规则描述的内容。您可以阅读有关资产管道的guide。我猜你更改了默认的application.css.scss 并删除了从app/assets/stylesheets 导入所有CSS 文件的行。
【讨论】：
是的，你是对的，我删除了*= require_tree，因为它导致了对 Sprocket 的循环依赖。我不知道这意味着什么，因为我是 Rails 新手，但删除它解决了这个问题。令人惊讶的是，我将其添加回来只是为了测试您的答案，现在它可以顺利运行。 :S 还是很困惑。【参考方案4】：
TL;DR：
忽略评论，它不是 Sass 制作的。但是放：
@import "*";
到你的 application.css.scss 文件中，它会自动导入所有控制器的 scss 文件。
完整阅读：
免责声明：这是我目前对使用和不使用 Sass 的资产管道流程的理解。
我认为这条评论是由标准 Rails 资产管道（链轮）编写的，而不是 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 "*";
作为参考，请参阅此问题： Is it possible to import a whole directory in sass using @import?
【讨论】：
以上是关于如何在 Rails 3.2.1 中使用控制器特定的样式表？的主要内容，如果未能解决你的问题，请参考以下文章
Rails - 如何覆盖设计SessionsController以在用户登录时执行特定任务？