Rails 自定義 css 鏈接不起作用 - 按照 http://ruby.railstutorial.org 中的教程

Question

我是 Rails 新手，正在學習這里的教程： http://ruby.railstutorial.org/ruby-on-rails-tutorial-book

我已將藍圖 css package 添加到 public/stylesheets 目錄並添加了 custom.css 文件，但是我似乎無法加載樣式表。 根據我對設置的理解，頁面應該有藍色背景和其他一些小的變化。

在我的 app/views/layouts/application.html.erb 文件中，我添加了以下行：

<%= stylesheet_link_tag 'stylesheets/custom', :media => 'screen' %>

我認為這應該會導致 /public/custom.css 中的 css 加載。

在本教程中，custom.css 文件的內容位於第 5.1.2 節（抱歉，我只能在此處發布 2 個超鏈接）。 app/views/layouts/application.html.erb 文件的內容在這里：

http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec:adding_to_the_layout

當我在頁面上查看源代碼時，這里有一個指向 custom.css 文件的鏈接：

但是單擊它會顯示“路由錯誤 - 沒有路由匹配”/stylesheets/stylesheets/custom.css“”消息。

據我所知，我已經完全按照教程進行操作，所以我不確定什么是錯的或我錯過了什么。 從這里到 go 的任何幫助將不勝感激。

application.html.erb 文件的完整文本：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%= csrf_meta_tag %>
       <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    
    <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
    <%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>
    <!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
    <%= stylesheet_link_tag 'custom', :media => 'screen' %>
  </head>
  <body>
    <div class="container">
      <header>
        <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
        <nav class="round">
          <ul>
            <li><%= link_to "Home", '#' %></li>
            <li><%= link_to "Help", '#' %></li>
            <li><%= link_to "Sign in", '#' %></li>
          </ul>
        </nav>
      </header>
      <section class="round">
        <%= yield %>
      </section>
    </div>
  </body>
</html>

當點擊源代碼中的 custom.css 鏈接時，仍然有同樣的錯誤：

"Routing Error - No route matches "/stylesheets/stylesheets/custom.css""

Answer 1

這發生在本地主機或生產環境中嗎？ 如果是生產，則打開 config/production.rb 並更改：

config.serve_static_assets = false

至

config.serve_static_assets = true

如果這發生在開發環境中，那么我想知道您是否可能有超過 1 個布局文件。 檢查以確保您沒有 application.html.erb和application.html.haml。 您的帖子也有可能有一個單獨的布局，標題為 post.html.haml 或其他東西......

還

你state如下：

Which I believe should cause the css from the /public/custom.css to load.

如果您的 custom.css 文件位於 public/custom.css 那么它在錯誤的位置，它應該在 public/stylesheets/custom.css

編輯：

下面是您的應用程序的屏幕截圖，它出現在我的機器上，在將樣式表移動到正確的文件夾后看起來它可以正常工作。 我還冒昧地刪除了public/index.html ，但是您可以暫時保留它，直到教程建議您將其取出

在此處輸入圖像描述

Answer 2

將其更改為stylesheet_link_tag 'custom', :media => 'screen' 。 它會自動查看 /public/stylesheets/

Answer 3

所以我不確定你是否想過這個（我相信你做過），但我遇到了同樣的問題，並找到了解決方案。 看起來 Rails 正在查看 /app/assets/stylesheets 而不是 /public/stylesheets。 我不確定這是否是正確的工作方式，但我將我的 custom.css 文件移到了那里，現在一切正常。

Answer 4

我在教程之后遇到了類似的問題，但它在第 4 章中遇到了我，我們首先包含了藍圖 css 文件的幫助程序。 我正在使用 Rails v. 3.1.3，對我來說，nnaficy 的回答解決了這個問題。 以下是 rubyonrails 指南中為什么會發生這種情況的描述：

（來源： http://guides.rubyonrails.org/layouts_and_rendering.html ）

" 3.1.2 使用 javascript_include_tag 鏈接到 JavaScript 文件

javascript_include_tag 幫助器為提供的每個源返回一個 HTML 腳本標記。

如果您使用啟用了 Asset Pipeline 的 Rails，此幫助程序將生成指向 /assets/javascripts/ 的鏈接，而不是在早期版本的 Rails 中使用的 public/javascripts。 然后，此鏈接由 Rails 3.1 中引入的 Sprockets gem 提供服務。”

（我復制了上面的解釋，但特定於 css 是以下片段：）

" 3.1.3 使用 stylesheet_link_tag 鏈接到 CSS 文件

stylesheet_link_tag 幫助器為提供的每個源返回一個 HTML 標記。

如果您在啟用“資產管道”的情況下使用 Rails，此幫助程序將生成指向 /assets/stylesheets/ 的鏈接。 該鏈接隨后由 Sprockets gem 處理。 樣式表文件可以存儲在以下三個位置之一：app/assets、lib/assets 或 vendor/assets。”

因此，我沒有將我的藍圖文件夾復制到 public/stylesheets/，而是將其復制到 app/assets/stylesheets/ 並且 css 發揮了作用。

Answer 5

與我當前的 Rails 3.2.6 應用程序相同的問題。 我已經解決了這個問題，包括 function：

<%= stylesheet_link_tag '/stylesheets/custom', :media => 'screen' %>

您必須使用絕對路徑而不是相對路徑。

Answer 6

好吧，也許外面的人還在苦苦掙扎，我一直在努力解決這些問題，我已經解決了這個問題。 就像@shime 說 Rails 在公共/樣式表中一樣。

application.html.erb
-----------------
`<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
        <%= csrf_meta_tag %>
        <%= stylesheet_link_tag **'screen'**, :media => 'screen' %>
        <%= stylesheet_link_tag **'print'**, :media => 'print'   %>
  </head>
    <body>
     <%= yield %>
    </body>
</html>`

將screen.css和print.css從 stylesheet/blueprint 移動到app/assets/stylesheets 。

Answer 7

換行：

<%= stylesheet_link_tag '/stylesheets/application', :media => 'screen' %>

至

<%= stylesheet_link_tag '/stylesheets/custom', :media => 'screen' %>

它對我有用。

Answer 8

此外，對於仍在解決問題的人，請檢查您是否將 CSS 放入正確的項目中。 我有一個名為“sample_app”的文件夾，我在其中開始了教程。 幾天后，我開始使用 Aptana/RadRails，它創建了一個自定義項目文件夾（工作區）。 我沒有意識到並將我所有的 css 放在我最初的“sample_app”文件夾中。 這就是 Rails 找不到 css/logo 的原因！

Rails 自定義 css 鏈接不起作用 - 按照 http://ruby.railstutorial.org 中的教程

問題描述

8 個解決方案

解決方案1
5 已采納 2011-07-18 12:42:01

解決方案2
3 2011-07-18 08:16:04

解決方案3
1 2011-11-29 20:46:57

解決方案4
1 2012-01-23 00:56:02

解決方案5
0 2012-07-11 15:56:56

解決方案6
0 2013-06-17 18:50:21

解決方案7
0 2013-08-07 11:19:40

解決方案8
0 2012-01-13 01:36:51

Rails 自定義 css 鏈接不起作用 - 按照 http://ruby.railstutorial.org 中的教程

問題描述

8 個解決方案

解決方案1 5 已采納 2011-07-18 12:42:01

解決方案2 3 2011-07-18 08:16:04

解決方案3 1 2011-11-29 20:46:57

解決方案4 1 2012-01-23 00:56:02

解決方案5 0 2012-07-11 15:56:56

解決方案6 0 2013-06-17 18:50:21

解決方案7 0 2013-08-07 11:19:40

解決方案8 0 2012-01-13 01:36:51

解決方案1
5 已采納 2011-07-18 12:42:01

解決方案2
3 2011-07-18 08:16:04

解決方案3
1 2011-11-29 20:46:57

解決方案4
1 2012-01-23 00:56:02

解決方案5
0 2012-07-11 15:56:56

解決方案6
0 2013-06-17 18:50:21

解決方案7
0 2013-08-07 11:19:40

解決方案8
0 2012-01-13 01:36:51