【问题标题】：How to apply stylesheet to view page如何将样式表应用于查看页面
【发布时间】：2013-12-03 16:33:49
【问题描述】：

我是 CSS/样式表的新手。如何将我在 vendor 文件夹下创建的样式表应用到我的用户显示页面？它用于个人资料缩略图。

show.html.erb：

<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<% end %></div></p>

【问题讨论】：

你的 application.css 中有 //= 需要供应商/whateverfilename
刚刚添加到 application.css 文件中。是否需要使用上面的代码将某些内容添加到 show.html 中？

标签： css ruby-on-rails stylesheet

【解决方案1】：

rails 资产管道分为 3 个不同的部分。

app/assets 用于应用程序拥有的资产，通常由您自己编写脚本。
lib/assets 用于您自己的库的代码，但实际上并不适合
进入应用程序或共享的那些库的范围跨应用程序。
vendor/assets 用于第三方资产，例如 js 插件和框架。

开始在公用文件夹中添加资产通常是不好的做法。当您的资产管道尝试在生产环境中编译和压缩它们时，它无法找到它们，因为它只在 app、lib 和 vendor 文件夹中查找。

<%= stylesheet_link_tag :application %>

这将自动在 app/assets 文件夹中查找并检索名为“application”的文件。从而在您的应用程序中呈现新样式！

要将新样式表包含到您的应用程序中，只需将文件添加到应用程序文件中，例如

/* ...
*= require_self
*= require_tree .
*= require custom_stylesheet_name
*/

require 会自动查找上述文件夹 (app/lib/vendor)。

如果您在资产方面需要更多帮助，请查看 RailsGuides；他们有很多有用且深入的内容。

http://guides.rubyonrails.org/asset_pipeline.html

评论更新：

您可以使用params[:controller] 值设置控制器特定资产。例如，如果您有一个 store_controller.rb，您可以包含一个 store.css 文件。解决方法分为三步：

您需要从 application.css 中删除 *= require_tree . 否则控制器特定的 css 文件将被包含两次。
确保资产管道预编译器收到新文件的通知 - 除 application.css 之外的所有文件都将被忽略，除非另有说明。您可以在 production.rb 文件中使用以下内容执行此操作：config.assets.precompile << "*.css"。

最后，您需要包含控制器特定文件：

<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>

<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>

另一方面，拥有特定的样式表可能不是最佳做法。拥有多个文件将导致多次服务器调用，减少响应时间并创建样式的加载顺序混乱。此外，资产管道旨在为客户端可以缓存的单个样式表提供服务。

另一种方法可能是为每个控制器定制一个全局类，即

body.controller-users {
   background-color:#000000;
}

<body class="controller-<%= params[:controller] %>">
   #...

【讨论】：

我了解管道。我想问的是是否需要我在显示或控制器中编写额外的代码，以便我的应用程序知道在哪里使这个新的 CSS 生效。我有缩略图的悬停效果。我觉得我应该在用户显示页面上指定只为缩略图部分启动 CSS。不过感谢您提供的信息。
用更多信息更新了我的答案。如果您觉得有帮助，请点赞或打勾:)

【解决方案2】：

从 layouts/application.html.erb 中跨所有 HTML 文件提取资产

此文档包含所有 <head> 和 <body> 属性。您应该在那里看到以下内容：

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

这将保留所有 html 文件中资产中显示的所有 css。确保将文件保存为index.html.erb

这里有一些阅读要做：

http://guides.rubyonrails.org/asset_pipeline.html

享受吧。

【讨论】：