【问题标题】：Adding page-specific CSS to Rails Asset Pipeline将特定于页面的 CSS 添加到 Rails 资产管道
【发布时间】：2015-01-28 04:27:46
【问题描述】：

这是几个人之前提出过的问题，但没有一个问题以我认为有帮助的方式提出或回答，所以我正在写我认为有帮助的问题和答案.

我有一个使用资产管道的 Rails 3.1+ 应用程序。我想要使用不同的 CSS 执行一项特定操作。（在我的特定情况下，我有一个要打印的页面，因此它确实需要完全不同的 CSS，并且不需要任何 Javascript。）目前，我只有一个特定于应用程序的 CSS 文件。如何添加新的 CSS 文件并指示资产管道使用我的文件？

例如，现在，我的app/assets 看起来像

app/assets
    /javascript
        application.js
        custom.js.coffee
    /css
        application.css
        custom.css.scss

我想添加一个print.css 文件，供特定操作的视图使用。此视图不会使用application.css 文件。如何添加print.css？

【问题讨论】：

标签： ruby-on-rails asset-pipeline

【解决方案1】：

我希望使用不同的 CSS 进行一项特定操作。

这是完成您正在寻找的另一种方法：

将控制器名称和操作名称添加到您的 /views/layouts/application.html.rb 中的应用主体中：

<body class="<%= controller_name %>-<%= action_name %>">
  <%= yield %>
</body>

然后在你的 .scss 文件中：

.controller_name-action_name {
  // your css goes here
}

因此，如果您的控制器是 static_pages 并且您的操作是 home：

.static_pages-home {
  // your css goes here
}

多田！您的 CSS 仅针对该特定操作显示。

【讨论】：

【解决方案2】：

官方解决方案

官方 Rails 指南中记录了它：http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets

实际上，您可以省略 require_tree 指令（位于 application.css 和 application.js 中），然后在模板中使用它：

对于特定于控制器的 JavaScript：

<%= javascript_include_tag params[:controller] %>

对于特定于控制器的 CSS：

<%= stylesheet_link_tag params[:controller] %>

【讨论】：

stylesheet_link_tag 生成标签，你不能在里面使用它......那么这个解决方案的目的是什么？

【解决方案3】：

你们都提出了非常复杂的答案。

1 转到应用程序/资产/样式表
2.制作一个扩展名为.css的文件
3.转到 config/initializers/assets.rb
4.把这行代码Rails.application.config.assets.precompile += %w( file.css )
5.将file.css替换为您创建的文件
6.转到您的 html.erb 文件
7.在<head>、<%= stylesheet_link_tag "file" %>中输入这个
8.用文件名替换file（名称中没有扩展名）

干得好，您链接了文件！

【讨论】：

感谢您的简洁回答。如果您尝试使用 sass，请将第 4 步中的 file.css 替换为 file.css.scss 或 file.scss，具体取决于您将文件保存在应用程序/资产/样式表中的方式。然后通过资产管道正确发送。不头痛！
效果很好，但它无效。单个 erb 文件没有部分。这通常在布局中。
与我的 appliciation.html.erb 文件中的主要部分分开，我将另一个部分添加到特定的 html.erb 文件中，它工作正常。有理由不这样做吗？
那只是格式错误的 HTML。请交叉检查..单个文档不能有多个标签
这仍然使它在任何地方都可用。但是，如果您在 application.html.erb 中输入 <% if @fileCSS %><%= stylesheet_link_tag 'file' %><% end %> 之类的内容，然后将 @fileCSS = true 放入您想要“查看”它的控制器方法中，它会完美运行。

【解决方案4】：

在你的布局中

<head>
  // ...
  <%= yield :stylesheets %>
</head>

在你看来

<%= provide :stylesheets do %>
  // your page-specific css
<% end %>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！
这应该是答案！就是这么简单。包括解释->“这是您将内容添加到头部的方式。”完成

【解决方案5】：

我发现这篇博文很有帮助：http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/。我的回答解释了这位博主已经写过的内容，并补充了一些缺失的细节。

首先，您必须阅读并理解the Rails Guide to the Asset Pipeline。不幸的是，本指南没有清楚地解释如何添加特定于动作的资产，但它确实涵盖了您需要了解的一些概念。确保您了解这些想法：

资产管道编译 Javascript、CSS 和其他资产，以便 Rails 服务器可以缓存资产以获得更好的性能。
清单文件使用require、require_tree 和require_self 等命令来指示哪些文件被编译在一起。
为了让资产管道在生产环境中正常工作，您需要手动运行 rake assets:precompile 以在 public 目录中生成已编译、缩小的资产。

这些想法是有关资产管道的最少“需要知道”的信息。如果您还不了解这些想法，那么您就没有关于管道的“专家或爱好者”级别的知识，不幸的是，SO 不是学习这些东西的正确地方。幸运的是，the Rails Guide to the Asset Pipeline 只需短短 15 分钟的阅读时间，如果您需要，它可以让您快速上手。

其次，您需要进行这些更改，以确保资产管道正确查看和处理您的新 print.css 文件。

按照以下步骤操作：

将您的print.css 文件添加到app/assets/css。
您需要创建一个清单文件，该文件将显示 Rails 在哪里可以找到print.css。即使您只有一个要添加的 CSS 文件，您也需要这样做。这是一个简单的步骤：
- 将名为print.js 的文件添加到app/assets/javascript。
- 将此行添加到print.js：

//= 需要打印

这将是整个print.js 文件中的唯一一行。如果我理解正确，Rails 期望清单文件具有文件扩展名 .js，这就是我们不使用 print.css 作为清单文件的原因。

我们现在需要指示 Rails 查找和使用 print.js 清单。在您的 config/application.rb 文件中添加以下行：

config.assets.precompile += %w( print.js )

我们快完成了！但是，已经存在的application.js 清单包含//= require_tree . 行，这意味着它将包含您的print.css 文件。这将导致您的print.css 样式影响您的整个站点，而不仅仅是单个视图。有两种处理方法：
- 如果application.js 和print.js 不共享任何资产，您可以在application.js 中使用stub 命令来排除print.js 中使用的资产。它的作用是指示application.js 从它自己的引用文件列表中删除print.js 引用的任何资产。我们修改后的application.js 看起来像：

（剪断……）要求树。存根打印

请参阅this answer 了解更多信息。

如果您的print.js 和application.js 文件共享一些资产，您需要将application.js 使用的所有资产移动到子目录中。我自己没有这样做，所以我在这方面不是最有帮助的。查看this answer 获取说明。

现在我们已将print.css 包含在资产管道中。我们现在需要指示 Rails 在您的特定视图中使用 print.css。

假设您的操作位于reports 控制器中，并且该操作名为print_reports。这意味着我们有一个reports_controller.rb 文件和一个print_reports.html.erb（或.haml）文件。我们需要对这些文件进行一些更改。

首先，在app/views/layouts 中添加一个新布局。也许称它为print.html.erb。我们将为您的print_reports.html.erb 文件使用这个新布局。根据需要进行设置。对于要打印的页面，这可能非常简单，例如

正文>