将特定于页面的 CSS 添加到 Rails Asset Pipeline [英] Adding page-specific CSS to Rails Asset Pipeline

问题描述

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

<小时>

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

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

应用程序/资产/javascript应用程序.jscustom.js.coffee/css应用程序.css自定义.css.scss

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

解决方案

我发现这篇博文非常有帮助: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 不是学习这些东西的正确地方.幸运的是，The Rails Guide to the Asset Pipeline 只需 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 不共享任何资源，您可以在您的 应用程序中使用 stub 命令.js 以排除 print.js 中使用的资产.它的作用是指示 application.js 从它自己的引用文件列表中删除 print.js 引用的任何资产.我们修改后的 application.js 看起来像:

<前>(剪辑……)需要_树.存根打印

有关详细信息，请参阅此答案.

• 如果您的 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 中添加一个新布局.也许称之为print.html.erb.我们将为您的 print_reports.html.erb 文件使用这个新布局.按照您的意愿进行设置.对于要打印的页面，这可能非常简单，例如

<前><头><title="打印"><身体><%=产率%>

使用单独的布局的缺点是难以保持此布局与应用程序其余部分使用的布局同步，但如果您为操作使用单独的 CSS 文件，则不太可能希望布局为反正都一样.

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

<前><头><title="打印"/><%= stylesheet_link_tag "打印" %><身体><%=产率%>

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

<前>类reports_controller <应用控制器布局打印"，仅:[:print_reports]#snip

查看这个问题了解更多信息和一些不同的方法.

此时，当您运行应用程序时，您的 print_reports 操作应该正确使用 print.css！

<小时>

记得在部署到服务器之前运行rake assets:precompile.

This is a question that several people have asked before, but none of the questions were quite asked or answered in a way that I found helpful, so I'm writing the question and answer that I would have found helpful.

---

I have a Rails 3.1+ app using the asset pipeline. There's one specific action that I want to have use different CSS. (In my specific case, I have a page that is intended to be printed, so it truly needs completely different CSS and does not need any Javascript.) Currently, I have only one application-specific CSS file. How do I add the new CSS file and direct the asset pipeline to use my file?

For example, right now, my app/assets looks like

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

I want to add a print.css file that is used by the view of a specific action. This view will not use the application.css file. How do I add print.css?

解决方案

I found this blog post to be very helpful: http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/. My answer paraphrases what this blogger already wrote and fills in a few missing details.

---

First, it's important that you've read and understood the Rails Guide to the Asset Pipeline. Unfortunately, this guide doesn't clearly explain how to add action-specific assets, but it does cover some concepts you need to know. Made sure you understand these ideas:

• That the asset pipeline compiles Javascript, CSS, and other assets so that Rails servers can cache assets for better performance.
• That manifest files use commands like require, require_tree, and require_self to indicate which files are compiled together.
• That in order for the asset pipeline to work properly in production, you need to manually run rake assets:precompile to produce the compiled, minified assets in the public directory.

These ideas are the minimum "need-to-know" pieces of information about the asset pipeline. If you don't already understand these ideas, you don't have an "expert or enthusiast" level of knowledge about the pipeline, and unfortunately, SO isn't the right place to learn this stuff. Fortunately, the the Rails Guide to the Asset Pipeline is a short 15-minute read and can get you up to speed quickly if you need it.

---

Second, these are the changes you need to make in order to ensure that the asset pipeline correctly sees and handles your new print.css file.

Follow these steps:

1. Add your print.css file to app/assets/css.
2. You'll need to create a manifest file that will show Rails where to find print.css. You need to do this, even though you only have a single CSS file you're adding. This is an easy step:
   • Add a file called print.js to app/assets/javascript.
   • Add this line to print.js:

//= require print

This will be the only line in the entire print.js file. If I understand correctly, Rails expects manifest files to have the file extension .js, which is why we aren't using print.css as the manifest file.

3. We now need to instruct Rails to find and use the print.js manifest. Add the following line in your config/application.rb file:

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

4. We're almost finished! However, the already-present application.js manifest includes the line //= require_tree . which means that it will include your print.css file. This will cause your print.css styling to affect your entire site, not just the single view. There are two ways of dealing with this:
   • If application.js and print.js do not share any assets, you can use the stub command in your application.js to exclude the assets used in print.js. What this does is instruct application.js to remove any of the assets that print.js references from its own list of referenced files. Our modified application.js looks like:

(snip...)
require_tree .
stub print

See this answer for more information.

• If your print.js and application.js files share some assets, you'll need to move all of the assets used by application.js into subdirectories. I didn't do this myself, so I'm not the most help in this area. Look at this answer for instructions.

---

Now we have included print.css in the asset pipeline. We now need to direct Rails to use print.css in your specific view.

Let's say your action is in the reports controller, and that the action is named print_reports. This means we have a reports_controller.rb file and a print_reports.html.erb (or .haml) file. We need to make several changes to these files.

1. To start, add a new layout in app/views/layouts. Perhaps call it print.html.erb. We'll use this new layout for your print_reports.html.erb file. Set it up as you desire. For a page intended to be printed, this will likely be very simple, such as

<html>
    <head>
        <title="Print">
    </head>
    <body>
        <%= yield %>
    </body>
</html>

Using a separate layout the disadvantage that it's difficult to keep this layout and the layout used by the rest of the application in sync, but if you are using separate CSS files for the action, it's unlikely that you want the layout to be the same anyway.

2. Add a stylesheet_link_tag in the layout's header pointing to your print.css:

<html>
    <head>
        <title="Print"/>
        <%= stylesheet_link_tag "print" %>
    </head>
    <body>
        <%= yield %>
    </body>
</html>

3. In the controller, we'll tell Rails to use our new layout for the action. Add the line layout 'print', only: [:print_reports] to your controller:

class reports_controller < ApplicationController
    layout 'print', only: [:print_reports]

    #snip

See this question for more information and a few different approaches.

At this point, when you run the app, your print_reports action should be using print.css correctly!

---

Remember to run rake assets:precompile before deploying on the server.

这篇关于将特定于页面的 CSS 添加到 Rails Asset Pipeline的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！