ruby-on-rails - 将页面特定的CSS添加到Rails Asset Pipeline

Question

这是几个人以前问过的一个问题，但是没有一个问题被我认为有帮助的方式问到或回答过，所以我写的是我认为有帮助的问题和答案。



我有一个使用资产管道的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/。我的回答解释了这位博客作者已经写过的内容，并填补了一些遗漏的细节。



首先，您必须阅读并理解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不共享任何资产，则可以在stub中使用application.js命令排除在print.js中使用的资产。这将指示application.js从其自己的引用文件列表中删除print.js引用的任何资产。我们修改后的application.js看起来像：



（截图...）
require_tree。
存根打印


有关更多信息，请参见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文件使用此新布局。根据需要进行设置。对于打算打印的页面，这可能非常简单，例如



<头>