官方解决方案

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目录中生成已编译的缩小资产。

这些想法是最低限度的＆＃34;需要知道＆＃34;有关资产管道的信息。如果您还没有理解这些想法，那么您就不会有专家或爱好者＃34;关于管道的知识水平，不幸的是，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：

//= require print

这将是整个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看起来像：

(snip...)
require_tree .
stub print

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

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

使用单独的布局缺点是难以保持此布局和应用程序其余部分使用的布局同步，但如果您使用单独的CSS文件进行操作，则会出现这种情况。不太可能你想要布局是相同的。

在布局标题中添加stylesheet_link_tag，指向print.css：

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

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

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

    #snip

有关更多信息和一些不同的方法，请参阅this question。

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

请记住在部署到服务器之前运行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.在<head>，<%= 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

在您的布局中

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

在你看来

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

Answer 5

有一个我想使用不同CSS的特定动作。

这是完成您要寻找的内容的另一种方法：

在 /views/layouts/application.html.rb 中将控制器名称和操作名称添加到应用程序主体中：

<body class="<%= controller_name %>-<%= action_name %>">
  <%= yield %>
</body>

然后在您的.scss文件中：

.controller_name-action_name {
  // your css goes here
}

因此，如果您的控制器是 static_pages ，而您的操作是 home ：

.static_pages-home {
  // your css goes here
}

多田！您的CSS仅针对该特定操作显示。

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

5 个答案:

官方解决方案