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

问题描述

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

我有一个使用资产管道的Rails 3.1+应用程序.我要使用一种不同的CSS，这是一个特定的动作. (在我的特定情况下，我有一个要打印的页面，因此它确实需要完全不同的CSS，并且不需要任何Javascript.)当前，我只有一个特定于应用程序的CSS文件.如何添加新的CSS文件并引导资产管道使用我的文件?

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?

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

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

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

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

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.

首先，请务必阅读并理解资产管道的Rails指南 .不幸的是，本指南并未明确说明如何添加特定于操作的资产，但确实涵盖了一些您需要了解的概念.确保您了解以下想法:

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:

• 资产管道可以编译Javascript，CSS和其他资产，以便Rails服务器可以缓存资产以提高性能.
• 清单文件使用require，require_tree和require_self之类的命令来指示将哪些文件编译在一起.
• 为了使资产管道在生产中正常运行，您需要手动运行rake assets:precompile以在public目录中生产经过编译的缩小资产.

• 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.

这些想法是有关资产管道的最少需要知道"的信息.如果您还不了解这些想法，那么您就不会对管道知识有专家或狂热者"的知识，不幸的是，SO不是学习这些知识的正确位置.幸运的是，资产管道的Rails指南只需15分钟的阅读时间，就能帮助您如果需要，可以加快速度.

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.

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

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.

请按照以下步骤操作:

1. 将您的print.css文件添加到app/assets/css.
2. 您将需要创建一个清单文件，该清单文件将显示Rails在何处找到print.css.即使您只有一个要添加的CSS文件，也需要这样做.这是一个简单的步骤:
   • 将名为print.js的文件添加到app/assets/javascript.
   • 将此行添加到print.js:

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

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

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.

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

1. 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 )

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

1. 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.

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

• 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.

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

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

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

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. 要开始，请在app/views/layouts中添加新的布局.也许将其称为print.html.erb.我们将为您的print_reports.html.erb文件使用此新布局.根据需要进行设置.对于打算打印的页面，这可能非常简单，例如

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>

使用单独的布局有一个缺点，即很难使此布局与应用程序其余部分使用的布局保持同步，但是如果您对操作使用单独的CSS文件，则不太可能希望该布局还是一样.

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.

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

1. 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>

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

1. 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.

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

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

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

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

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