2013-08-15 4 views
1

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

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

При запуске сервера рельсов и перейдите на мою страницу, я получаю сообщение об ошибке:

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

+2

Вы перезапустили сервер после установки драгоценного камня? – vee

+0

Да, несколько раз. @vinodadhikary – Hummus

+0

Можете ли вы показать соответствующий раздел 'styles.css.scss', потому что, как вы сказали,« bootstrap »@import« должен работать нормально. – vee

ответ

1

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

Он упоминает установки начальной загрузки, как это:

#commandline 
rails g bootstrap:install 

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

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

Помните, что этот камень меньше. Импортирует меньше файлов в ваш файл scss.

0

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

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

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

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

Если вы используете хотите использовать бутстраповские рельсы камень, вам необходимо импортировать в звездочке в application.css

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

# app/assets/stylesheets/application.css 

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

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

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

+0

Я думаю, что люди обычно используют 'bootstrap-sass' из-за части' sass'. Таким образом, вы можете использовать mixins и переменные boostrap в таблице стилей и т. Д. – j03w

0

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

Он должен выглядеть следующим образом:

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

@import "bootstrap"; 

... 

Это очень важно использовать этот импорт в .scss файле. Иначе это не сработает.

Имеют смысл?