如何在 Rails 3.2.1 中使用控制器特定的样式表？答案

【问题标题】：How do I use Controller specific stylesheets in Rails 3.2.1?如何在 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 中编写的规则不适用于我的网站？

【问题讨论】：

标签： ruby-on-rails css ruby-on-rails-3.1 sass

【解决方案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?

【讨论】：