如何將樣式表應用於查看頁面

Question

我是CSS /樣式表的新手。 如何將在vendors文件夾下創建的樣式表應用於用戶顯示頁面？ 用於個人資料縮略圖。

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>

Answer 1

Rails資產管道分為3個不同的部分。

應用程序/資產用於應用程序擁有的資產，通常由您自己編寫腳本。
lib / 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文件。 解決方案包括三個3個步驟：

您需要刪除*= require_tree . 從application.css中獲取，否則控制器特定的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] %>">
   #...

Answer 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 %>

這將使資產中顯示的所有CSS都顯示在所有html文件中。 確保將文件另存為index.html.erb

這里有一些閱讀要做：

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

請享用。

如何將樣式表應用於查看頁面

問題描述

2 個解決方案

解決方案1
1 2013-12-03 17:04:07

評論更新：

解決方案2
0 2013-12-03 16:57:21

如何將樣式表應用於查看頁面

問題描述

2 個解決方案

解決方案1 1 2013-12-03 17:04:07

評論更新：

解決方案2 0 2013-12-03 16:57:21

解決方案1
1 2013-12-03 17:04:07

解決方案2
0 2013-12-03 16:57:21