Подтвердить что ты не робот

CSS не загружается в приложение

CSS не загружается в моем приложении rails. Это файл index.html.erb, расположенный в представлении/продуктах:

 <h1>Listing products</h1>

<table>
<% @products.each do |product| %>
  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

  <td>
    <%= image_tag(product.image_url, :class=> 'list_image') %>
  </td>

  <td class="list_description"> 
    <dl>
      <dt><%= product.title %></dt>
      <dd><%= truncate(strip_tags(product.description), :length=> 80) %></dd>
    </dl>
  </td>

  <td class="list_actions">
    <%= link_to 'Show', product %><br/>
    <%= link_to 'Edit', edit_product_path(product) %><br/>
    <%= link_to 'Destroy', product, 
              :confirm=> 'Are you sure?',
              :method=> :delete %>
  </td>
</tr>
<% end %>
</table>

<br />

<%= link_to 'New product', new_product_path %>

Затем у меня есть файл application.html.erb, расположенный в представлении/макетах. Этот файл должен связать css с html.

<!DOCTYPE html> 
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag  "application" %>
  <%= javascript_include_tag  "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Мой файл css products.css.scss, расположенный в свойствах/таблицах стилей, выглядит следующим образом:

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

 .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }

  .list_actions {
     font-size:    x-small;
     text-align:   right;
     padding-left: 1em;
  }

  .list_line_even {
    background-color:   #e0f8f8;
  }

  .list_line_odd {
    background-color:   #f8b0f8;
  }
}

И, наконец, мой файл application.css выглядит следующим образом:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
 */

Все выглядит хорошо для меня, и, насколько я понимаю, application.css собирает все остальные файлы css, поэтому вам не нужно связывать их вручную. Правильно ли я?

Также здесь журнал сервера, когда я загружаю страницу:

Started GET "/products" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
  Processing by ProductsController#index as HTML
  Product Load (0.1ms)  SELECT "products".* FROM "products" 
 Rendered products/index.html.erb within layouts/application (7.4ms)
 Completed 200 OK in 26ms (Views: 24.2ms | ActiveRecord: 0.4ms)


 Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /scaffolds.css - 304 Not Modified (0ms)


 Started GET "/assets/all.css" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /all.css - 404 Not Found (4ms)

 ActionController::RoutingError (No route matches [GET] "/assets/all.css"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-                           3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.5ms)


 Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.css - 304 Not Modified (0ms)


 Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery.js - 304 Not Modified (0ms)


 Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery_ujs.js - 304 Not Modified (0ms)


 Started GET "/assets/products.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.js - 304 Not Modified (0ms)


 Started GET "/assets/defaults.js" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /defaults.js - 404 Not Found (3ms)

 ActionController::RoutingError (No route matches [GET] "/assets/defaults.js"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-          3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.9ms)

Почему мое приложение не показывает CSS?

4b9b3361

Ответ 1

У вас есть это в вашем ProductsController, или если отсутствует, ApplicationController?

layout "application"

У вас есть конвейер pre-asset <%= stylesheet_link_tag :all %> где-то, который обычно включает в себя все таблицы стилей в /public/stylesheets, но он сообщает конвейеру активов для поиска файла с именем all.css.

Так как <%= stylesheet_link_tag :all %> явно не находится в вашем макете application.html.erb, создается другой макет. Остановите его и/или убедитесь, что ваш контроллер вызывают правильный макет.

Ответ 2

Запустите rake assets:precompile, чтобы скомпилировать и скопировать ваш css из /assets в/public (rails 3.1 +)

Ответ 3

В моем случае исправление ошибки в моей таблице стилей и запуск:

$ RAILS_ENV=development rake assets:clean

зафиксировала проблему.

Выполнение команды отменяет ваши созданные файлы CSS и заставляет рельсы восстанавливать вывод CSS из ваших файлов Sass или SCSS.

Ответ 4

Возможно, вы захотите изменить свой тег ссылки на таблицу стилей. Я вижу, что вы используете

<%= stylesheet_link_tag  "application" %>

Недавно созданное приложение rails должно иметь следующие два тега ссылки, которые будут автоматически включать все таблицы стилей и javascript:

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>

Но мне кажется, что вы соглашаетесь с "Agile Web Development with Rails Book", и в этом случае вы можете использовать следующее:

<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
<%= javascript_include_tag "application" %>

Надеюсь, я мог бы помочь вам и будущим читателям Agile Web Development with Rails book, которые проходят через депо пример приложения.

Ответ 5

Я наткнулся на ту же проблему, следуя за Agile Web Development with Rails. Пробовал все рекомендуемые решения, но безуспешно.

Вот что сработало для меня:

В файле aplication.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->

<%= yield %>

</body>
</html>

Выделение - важная часть.

Нашел решение здесь: http://pragprog.com/titles/rails4/errata, где говорится:

Сэм Руби говорит: http://pragprog.com/titles/rails4/source_code.

Надеюсь, что это все еще помогает.

Алекс

Ответ 6

ну, измените приложение /views/layouts/application.html.erb, можете работать измените приложение "stylesheet_link_tag" "" на "stylesheet_link_tag" депо "".

Я хочу, чтобы это вам помогло!

Ответ 7

Просто он заработал. Мне пришлось поместить файл depot.css в app/views/assets/stylesheets (НЕ публичный каталог, как сказано в книге), и я изменил ссылку на таблицу стилей в application.html.erb, чтобы выглядеть так:

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag "depot"%>
  <%= javascript_include_tag  :defaults %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Ответ 8

Сделать контроллер дочерним элементом ApplicationController

Чтобы подключить ваш контроллер (и его представления) к конвейеру, убедитесь, что ваш контроллер является дочерним элементом ApplicationController.

class ProductsController < ApplicationController
  # all your code
end

Ссылка на ваш корневой файл css

Также убедитесь, что ваш application.html.erb имеет следующую строку:

<%= stylesheet_link_tag 'application', media: 'all' %>

Это добавляет основной файл application.css к вашим представлениям.

Добавьте все файлы css через корневой файл

Наконец, убедитесь, что ваш application.css имеет следующую строку:

*= require_tree .

Если все это на месте, каждый файл в app/assets/stylesheets/ будет включен в конвейер css.

Ответ 9

Измените index.html.erb

<table class="products">

Ответ 10

Похоже, вы получаете этот код из книги "Agile Web Development with Rails". В этом случае, возможно, одна строка неверна в app/views/layouts/application.html.erb: изменить

<body>

к

<body class='<%= controller.controller_name %>'>

По крайней мере, это работает для меня.

Ответ 11

У меня возникла та же проблема, но я получил свой css для работы... Я просто изменил все одиночные кавычки на двойные кавычки в файле index.html.erb. Ничего не нужно менять. Я использую рельсы 3.2.6

Ответ 12

Если вы собрали свои активы один раз на своем локальном компьютере для развертывания, он сделает так, чтобы он попытался их использовать. Вы можете использовать rake assets:precompile для обновления. Или вы можете зайти в свою папку tmp (в корневом каталоге приложения rails) и удалить все в кеше/активах и кеш/сасси. Затем после этого вы можете войти в /public/assets и удалить все с помощью хэша после него (случайные строки). Затем перезапустите сервер. Это то, что сработало для меня.

Ответ 13

Из книги: Agile Web Development с Rails 4

on ~ Page 72.

В графике вы найдете небольшую стрелку рядом с тегом.

С этим изменением мы будем включать имя контроллера в <body class="">, чтобы имя класса изменилось на основе контроллера.

В вашем файле SCSS. "products.css.scss" начинается с стилизации "CSS CLASS" для продуктов. В нашем случае это .products с кучей стилей, вложенных внутри него.

Небольшое изменение, которое в основном предотвращает применение класса .products к телу, что, в свою очередь, мешает тому, чтобы все оставалось в стиле.

Ответ 14

в вашем файле 'layout.html.erb', конвейер ресурсов получает application.css только так, как вы можете прочитать в своем файле application.html.erb.

Я бы попытался добавить строку "@import" продуктов "" в этом файле application.css. Имел ту же проблему и смог ее исправить (используя рельсы 4.1, хотя).

Ответ 15

Это может помочь кому-то найти это. У меня была аналогичная проблема. В моем случае указанный css был переопределен другими свойствами файлов css.

Попробуйте добавить эту строку в свой application.html.erb.

<%= stylesheet_link_tag params[:controller] %>

Ответ 16

Поздно и, может быть, я что-то пропустил, что вы подразумеваете под "CSS не загружается в моем приложении rails"? Если вы просматриваете исходный код страницы в своем браузере, вы видите элементы ссылки в таблице стилей вашего приложения? Ваша таблица оформлена как аспект?

Из того, что я вижу в журнале сервера:

Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 [...]
Served asset /products.css - 304 Not Modified (0ms)

Ваше приложение использует файлы CSS.

Кстати, как вы сказали, application.css "загружает" другие файлы CSS, это делается с помощью require_tree.

Ответ 17

У меня была такая же проблема с Rails 3.2.0 с ruby-2.0.0-p247. Я пробовал каждое предложение в этой теме. Я понятия не имею, почему, но переход на Rails 3.2.12 исправил его.