레일 4와 부트 스트랩 통합 보석

Question

나는 최근에 hackathon에 참석했고, 우리는 레일로 웹 애플리케이션을 만들었습니다. 우리는 모두 레일에 익숙하지 않았고 부트 스트랩 보석을 인식하지 못했기 때문에 assets 폴더에 부트 스트랩 스타일 시트를 하드 코딩했습니다.

레일스를 배우려는 노력의 일환으로, 계속해서 앱을 계속 사용하고 있습니다. .css 파일을 삭제하고 gemfile에 gem을 추가했습니다. 번들을 설치하고 다른 CSS 파일의 '@import'명령을 사용하여 파일을 가져 왔습니다.

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 %> 

오류가 발생하는 이유를 이해가 안 : 나는 레일 서버를 실행하고 내 홈페이지로 이동하면

, 나는 오류가 발생합니다.

도움이 될 것입니다.

감사합니다.

나는이 보는 것이 좋습니다

Answer 1

SohamK : RailsCast

그것은 다음과 같이 부트 스트랩 설치를 언급한다 :

#commandline 
rails g bootstrap:install 

는 그 후 작동하지 않는 경우 다음 작은 파일이 추가보십시오.

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

보석이 적음을 유의하십시오. scss 파일에 파일을 덜 가져 오는 것은 중단됩니다.

Answer 2

업데이트 : 이미 부트 스트랩을 사용하고 있으므로 문제가되지 않습니다. styles.css.scss 내용 붙여 넣기

원본 : 사용자 정의 스타일 시트로 가져 오려면 bootstrap-rails gem 대신 bootstrap-sass가 필요할 수 있습니다. 당신은 부트 스트랩 레일 보석을 사용하려면 사용하는 경우

#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 
*/ 

Answer 3

에 스프라켓 내부에 가져올 필요 간단히 부트 스트랩 파일을 'Vendor'assets 폴더에 포함 시키십시오 (JQuery와 같이 거기에 코딩되지 않은 것을 넣는 것이 일반적입니다).

내가 선호하는 이유는 트위터 - 부트 스트랩에 업데이트가있을 때 파일을 삭제하는 것이 훨씬 간단하기 때문입니다. 또한 사용하는 편집기에 관계없이 CSS 파일을 보는 것이 훨씬 좋습니다.

Answer 4

.scss을 application.css에 추가하십시오. 삭제 한 경우 다시 추가하십시오.

은 다음과 같아야합니다 : .scss 파일이 가져 오기를 사용하는 것이 매우 중요합니다

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

@import "bootstrap"; 

... 

. 그렇지 않으면 작동하지 않습니다.

의미가 있습니까?