Интеграция с Bootstrap с Rails 4

Question

Недавно я посетил хакатон, и мы сделали веб-приложение в рельсах. Мы все были новичками в rails и не знали о самоцвете начальной загрузки, поэтому мы жестко закодировали таблицу стилей начальной загрузки в папке assets.

Чтобы продолжить изучение Rails, я продолжаю работу над приложением. Я удалил файл.css и добавил его в свой Gemfile. Я запустил пакетную установку и импортировал файлы с помощью команды @import в другой файл CSS.

Когда я запускаю сервер rails и перехожу на свою домашнюю страницу, я получаю сообщение об ошибке:

    Sass::SyntaxError in Pages#rootpage

Showing C:/Users/User/Documents/SoapBox/app/views/layouts/application.html.erb where line #6 raised:

File to import not found or unreadable: bootstrap.

Load paths:
  C:/Users/Soham/Documents/SoapBox/app/assets/images
  C:/Users/Soham/Documents/SoapBox/app/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets
  C:/Users/Soham/Documents/SoapBox/vendor/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/vendor/assets/stylesheets
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/turbolinks-1.3.0/lib/assets/javascripts
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/jquery-rails-3.0.4/vendor/assets/javascripts
  (in C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets/styles.css.scss:2)
`File to import not found or unreadable: bootstrap`.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
<%= favicon_link_tag "favicon.png", :type => "image/png", :rel => "icon" %>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

Я не понимаю, почему происходит ошибка.

Любая помощь приветствуется!

Спасибо!

SohamK

Answer 1

Я рекомендую смотреть это: RailsCast

Здесь упоминается установка начальной загрузки так:

#commandline
rails g bootstrap:install

Если после этого это не сработает, попробуйте добавить это в свой меньший файл.

#css NOT scss   
@import "twitter/bootstrap/bootstrap";

Помните, что драгоценный камень меньше. Импорт меньшего количества файлов в ваш файл scss прекратится.

Answer 2

Добавьте расширение .scss в application.css, Если вы удалили его, добавьте его снова.

Это должно выглядеть так:

#application.css.scss
/*
 *
 *= require_self
 *= require_tree .
*/

@import "bootstrap";

...

ОЧЕНЬ важно использовать этот импорт в .scss файл. Иначе это не сработает.

Есть смысл?

Answer 3

Обновление: поскольку вы уже используете bootstrap-sass, проблем не должно быть. Можете ли вы вставить содержимое вашего styles.css.scss

Оригинал: вам может понадобиться bootstrap-sass вместо самоцвета bootstrap-rails, если вы хотите импортировать его в пользовательскую таблицу стилей.

#Gemfile
group :assets do
  gem 'bootstrap-sass'
end

# app/assets/stylesheets/styles.css.scss
@import 'bootstrap';
@import 'bootstrap/responsive';

Если вы хотите использовать гем bootstrap-rails, вам нужно импортировать его в sprocket в application.css

# Gemfile
group :assets do
  gem 'bootstrap-rails'
end

# app/assets/stylesheets/application.css

/*
*= require bootstrap
*= require bootstrap/responsive
*/

Answer 4

Хотя это не ответит на ваш вопрос, касающийся вашей ошибки, я предпочитаю просто включить файл Bootstrap в вашу папку ресурсов 'Vendor' (в которой принято помещать в нее что-то не кодированное вами, например JQuery).

Я предпочитаю это, потому что, когда в Twitter-Bootstrap есть обновление, гораздо проще просто удалить файлы. Кроме того, гораздо приятнее видеть ваши CSS-файлы в любом редакторе, который вы используете.