#ruby-on-rails #css #heroku #ruby-on-rails-3.1 #twitter-bootstrap
#ruby-on-rails #css #heroku #ruby-on-rails-3.1 #twitter-bootstrap
Вопрос:
Я новичок в ruby, и это мой первый вопрос stackoverflow (хотя я использовал предыдущие вопросы и ответы на тонну — спасибо сообществу stackoverflow за это!), Поэтому, пожалуйста, извините меня, если это глупый вопрос.
Я видел другие опубликованные вопросы о проблемах с Heroku и boostrap.css, но это не столько прямая ошибка, сколько то, что работает не совсем так, как ожидалось.
Недавно я добавил верхнюю панель навигации в свое приложение Rails 3, используя стили, предоставленные boostrap.css. В документации они рекомендуют добавить padding-top: 40px в файл css, чтобы освободить место для панели навигации.
Заполнение выглядит правильно на localhost, но по какой-то причине не работает в Heroku. Остальная часть boostrap css кажется правильной (цвета кнопок, атрибуты таблицы и т.д.), Но я не могу вставить дополнение. Простым обходным путем было бы добавление некоторых
тегов в верхней части моего index.html файл, но я хотел бы понять, почему это происходит, если это указывает на более серьезную проблему css.
Код добавлен в файл bootstrap.css для заполнения:
html, body {padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 40px;
}
index.html код:
<div class="topbar">
<div class="fill">
<div class="container">
<h3><%= link_to 'Your Book Club', homes_path %></h3>
<ul>
<li><%= link_to 'Home', homes_path %></li>
<li class="active"><%= link_to 'Books', books_path %></li>
<li><%= link_to 'Locations', locations_path %></li>
<li><a href="#">Calendar</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="menu">
<a href="#" class="menu">Account stuff will go here</a>
<ul class="menu-dropdown">
<li><a href="#">Dolor sit</a></li>
<li><a href="#">Amet Consequeter</a></li>
<li class="divider"></li>
<li><a href="#">Enough with the Latin</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<h1>Which books do you want to read as part of our book club?</h1>
<br />
<h3>Instructions:</h3>
<br />
<p>1. Vote for any of the books below that you'd like to read</p>
<br /><br/>
<p>2. And/or:
<button type="submit" class="btn"><%= link_to 'Add a New Book', new_book_path %></button></p>
<br /><br/>
<p>3.
<button type="submit" class="btn info"><a href="./locations">Vote on Locations</a></button>
<br /><br />
<table class="zebra-striped">
<tr>
<th>Title (Click name to see description)</th>
<th>ISBN</th>
<th>How many votes does it have?</th>
<th>Vote for this book</th>
<th></th>
</tr>
<% @books.each do |book| %>
<tr>
<td><%= link_to book.title, book %></td>
<td><%= book.isbn %></td>
<td><%= pluralize(book.votes.length, "vote") %></td>
<td><%= link_to ' 1', votes_path(:book_id => book.id), :method => :post %></td>
<td><span class="label important"><%= link_to 'Delete', book, confirm: 'Are you sure?',
method: :delete %></span></td>
</tr>
<% end %>
</div>
</table>
<br />
Комментарии:
1. Вы не забыли зафиксировать и нажать с соответствующим набором дополнений? Вы пробовали жесткое обновление (просто чтобы убедиться, что вы не видите устаревший css)?
2. Я несколько раз фиксировал (перемещал css в нижнюю часть файла, затем в верхнюю), но ничего. Я открыл приложение в другом браузере, и оно выглядит так же (без заполнения). Вы можете проверить это здесь: simple-water-5927.herokuapp.com/books
Ответ №1:
Я не уловил, что вы используете конвейер активов. Вот в чем ваша проблема; вам нужно предварительно скомпилировать свои активы, прежде чем совершать фиксацию и нажимать: http://devcenter.heroku.com/articles/rails31_heroku_cedar
bundle exec rake assets:precompile
git ci -a -m "Compile assets for production"
git push
Обратите внимание, что если вы используете Celadon Cedar, есть несколько крючков, которые сделают это за вас при компиляции slug, что действительно удобно.
Комментарии:
1. Вау, спасибо, это определенно что-то сделало! Проблема в том, что теперь все другие стили из bootstrap.css исчезли (с Heroku, а не с localhost). Вы знаете, почему css на Heroku выглядит иначе, чем css на моем локальном сервере?
2. Я только что перенес свой CSS из файла books.css.scss (для моей модели books) в файл application.css.scss, и теперь заполнение работает в Heroku! Должно быть, это как-то связано с конвейером ресурсов, о котором я сейчас узнаю здесь: guides.rubyonrails.org/asset_pipeline.html Спасибо coreyward за вашу помощь!
3. Нет проблем! Вы добавили строку для импорта bootstrap.css в свой файл application.css?
4. Нет, я просто скопировал css. Как бы я это сделал, добавив строку?
5. Вверху
application.css
используйте//= require bootstrap
, а затем следующую строку//= require_self
. Затем код bootstrap.css будет добавлен перед всем в application.css, и они будут уменьшены и объединены вместе в производстве.