将特定于页面的CSS添加到Rails Asset Pipeline

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

---

我有一个使用资产管道的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 ？

Answer 1

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

---

首先，您必须阅读并理解资产管道的Rails指南 。 遗憾的是，本指南并未明确说明如何添加特定于操作的资产，但它确实涵盖了您需要了解的一些概念。 确保您了解这些想法：

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

这些想法是关于资产管道的最低“需要知道”信息。 如果你还没有理解这些想法，那么你就没有关于管道的“专家或发烧友”级别的知识，不幸的是，SO并不是学习这些东西的合适场所。 幸运的是， 资产管道的Rails指南只需 15分钟的阅读时间，如果您需要，可以让您快速上手。

---

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

跟着这些步骤：

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

 // =要求打印

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

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

 config.assets.precompile + =％w（print.js）

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

 （略...）
 require_tree。
存根打印

有关更多信息，请参阅此答案 。

• 如果print.js和application.js文件共享某些资产，则需要将application.js使用的所有资产移动到子目录中。 我自己没有这样做，所以我不是这方面最有帮助的。 看看这个答案的说明。

---

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

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

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

 
     
         <标题= “打印”>
     
     
         <％=产量％>
     
 

使用单独的布局缺点是难以保持此布局和应用程序其余部分使用的布局同步，但如果您使用单独的CSS文件进行操作，则不太可能您希望布局相同。

2. 在布局的标题中添加一个指向print.css的stylesheet_link_tag ：

 
     
         <标题= “打印”/>
         <％= stylesheet_link_tag“print”％>
     
     
         <％=产量％>
     
 

3. 在控制器中，我们将告诉Rails使用我们的新布局进行操作。 将行layout 'print', only: [:print_reports]添加到控制器： layout 'print', only: [:print_reports] ：

 class reports_controller 
 有关更多信息和一些不同的方法，请参阅此问题 。 
 此时，当您运行应用程序时，您的print_reports操作应该正确使用print_reports ！ 

 请记住运行rake assets:precompile在服务器上部署之前进行rake assets:precompile 。 

Answer 2

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

1转到app / assets / stylesheets
2.制作扩展名为.css的文件
3.转到config / initializers / assets.rb
4.输入这一行代码Rails.application.config.assets.precompile += %w( file.css )
5.用您创建的文件替换file.css
6.转到您的html.erb文件
7.在 ， <%= stylesheet_link_tag "file" %>键入此内容
8.用文件名替换file （名称中没有扩展名）

你把文件链接好了！

Answer 3

官方解决方案

它在官方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] %> 

Answer 4

在你的布局中

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

在你看来

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