Question

我刚开始使用rails并在这里进入教程：http://ruby.railstutorial.org/ruby-on-rails-tutorial-book

我已将blueprint css包添加到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“”消息。

据我所知，我完全按照教程进行操作，所以我不确定错误或错过了什么。任何有关从哪里出发的帮助都将不胜感激。

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

这是在localhost还是生产环境中发生的？如果是生产，则打开config / production.rb并更改：

config.serve_static_assets = false

到

config.serve_static_assets = true

如果在开发环境中发生这种情况，那么我想知道你是否有超过1个布局文件。检查以确保您没有application.html.erb 和 application.html.haml。您的帖子也可能有一个单独的布局，标题为post.html.haml或其他...

ALSO

您说明以下内容：

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，但你可以暂时保留它，直到教程建议你把它拿出来

enter image description here

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脚本标记。

如果您在启用资产管道的情况下使用Rails，则此助手将生成指向/ assets / javascripts /的链接，而不是早期版本的Rails中使用的public / javascripts。然后，这个链接由Sprockets gem提供，这是在Rails 3.1中引入的。“

（我复制了上面的解释，但具体到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

此外，对于仍在处理此问题的人，请检查您是否将CSS放在正确的项目中。我有一个名为＆＃34; sample_app＆＃34;的文件夹。我在其中开始了教程。几天后，我开始使用Aptana / RadRails，它创建了一个自定义项目文件夹（工作区）。我没有意识到并把我所有的css放在我最初的＆＃34; sample_app＆＃34;夹。这就是为什么Rails无法找到css / logo！

Answer 6

与我目前的Rails 3.2.6应用程序相同的问题。我用这个包含函数解决了它：

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

你必须使用绝对路径而不是相对路径。

Answer 7

好的，也许那里的人还在苦苦挣扎，我一直试图解决这些问题，我已经解决了这个问题。就像@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 从样式表/蓝图移至 app / assets / stylesheets 。

Answer 8

更改行：

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

到

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

它对我有用。

Rails自定义css链接不起作用 - 遵循http://ruby.railstutorial.org中的教程

8 个答案: