问题描述
这是几个人以前问过的问题,但是没有一个问题被我认为有帮助的方式问到或回答过,所以我写的是我认为有帮助的问题和答案
我有一个使用资产管道的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
?
推荐答案
我发现此博客文章非常有帮助: http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/.我的回答解释了这位博客作者已经写过的内容,并填补了一些遗漏的细节.
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
, andrequire_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 thepublic
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.
请按照以下步骤操作:
- 将您的
print.css
文件添加到app/assets/css
. - 您将需要创建一个清单文件,该清单文件将显示Rails在何处找到
print.css
.即使您只有一个要添加的CSS文件,也需要这样做.这是一个简单的步骤:- 将名为
print.js
的文件添加到app/assets/javascript
. - 将此行添加到
print.js
:
- 将名为
- Add your
print.css
file toapp/assets/css
. - 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
toapp/assets/javascript
. - Add this line to
print.js
:
- Add a file called
//= 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.
- 我们现在需要指示Rails查找和使用
print.js
清单.在config/application.rb
文件中添加以下行:
- We now need to instruct Rails to find and use the
print.js
manifest. Add the following line in yourconfig/application.rb
file:
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
看起来像:
- 如果
- We're almost finished! However, the already-present
application.js
manifest includes the line//= require_tree .
which means that it will include yourprint.css
file. This will cause yourprint.css
styling to affect your entire site, not just the single view. There are two ways of dealing with this:- If
application.js
andprint.js
do not share any assets, you can use thestub
command in yourapplication.js
to exclude the assets used inprint.js
. What this does is instructapplication.js
to remove any of the assets thatprint.js
references from its own list of referenced files. Our modifiedapplication.js
looks like:
- If
(snip...)
require_tree .
stub print
有关更多信息,请参见此答案.
See this answer for more information.
- 如果
print.js
和application.js
文件共享某些资产,则需要将application.js
使用的所有资产移到子目录中.我不是自己做的,所以在这方面我不是最大的帮助.请查看此答案以获取说明.
- If your
print.js
andapplication.js
files share some assets, you'll need to move all of the assets used byapplication.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.
- 要开始,请在
app/views/layouts
中添加新的布局.也许将其称为print.html.erb
.我们将为您的print_reports.html.erb
文件使用此新布局.根据需要进行设置.对于打算打印的页面,这可能非常简单,例如
- To start, add a new layout in
app/views/layouts
. Perhaps call itprint.html.erb
. We'll use this new layout for yourprint_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.
- 在布局标题中添加一个
stylesheet_link_tag
指向您的print.css
:
- Add a
stylesheet_link_tag
in the layout's header pointing to yourprint.css
:
<html>
<head>
<title="Print"/>
<%= stylesheet_link_tag "print" %>
</head>
<body>
<%= yield %>
</body>
</html>
- 在控制器中,我们将告诉Rails将新布局用于操作.将行
layout 'print', only: [:print_reports]
添加到您的控制器中:
- 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!