내 application.css.scss 파일에 부트 스트랩을 포함시키는 적절한 방법은 무엇입니까?

Question

레일 4.2.3을 사용하고 있습니다. 이 파일은 app/assets/stylesheets/application.css.scss입니다. 왜 프로젝트를 만들 때 레일스가 자동으로이 파일을 생성했는지 묻지 마십시오.

/* 
… 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

나는 부트 스트랩을 추가하고 싶었, 다양한 튜토리얼 내가 그것을 작동하게하는 "@import"문을 추가 권장합니다. 그래서

… 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap/theme' 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

을 시도했지만 내 페이지를로드 할 때 지금은 오류

Sass::SyntaxError in Users#edit 

Invalid CSS after "html ": expected selector or at-rule, was "{" 

내 application.css.scss 파일의 부트 스트랩 지시를 포함하는 적절한 방법은 무엇을 얻을?

Answer 1

마지막 가져 오기를 세미콜론으로 종료하는 것을 잊었습니다.

/* 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap/theme'; 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

Answer 2

개인적으로 나는 내 자산을 scss로 가져 오는 것이 좋습니다.

Gemfile에 부트 스트랩 보석을 추가하십시오 (https://rubygems.org/gems/bootstrap). bootstrap_and_overrides을 app/assets/stylesheets 및 app/assets/javascripts에 만듭니다.

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require tether 
//= require bootstrap_and_overrides/bootstrap 

그리고 당신의 application.css.scss :

@import "bootstrap_and_overrides/variables"; 
@import "bootstrap_and_overrides/bootstrap"; 
@import "bootstrap_and_overrides/overrides"; 

예 bootstrap.js에 대한 자바 스크립트 자산

app 
|_assets 
    |_javascripts 
    |_bootstrap_and_overrides 
     |_bootstrap.js 
    |_stylesheets 
    |_bootstrap_and_overrides 
     |_bootstrap.scss 
     |_variables.scss 
     |_overrides.scss 

귀하의 application.js는 다음과 같이 보인다. 이것으로 당신은로드하고 무엇을하지 않도록 선택할 수 있습니다 : bootstrap.scss에 대한

//= require bootstrap/util 
//= require bootstrap/alert 
//= require bootstrap/button 
// require bootstrap/carousel 
//= require bootstrap/collapse 
//= require bootstrap/dropdown 
// require bootstrap/modal 
// require bootstrap/scrollspy 
//= require bootstrap/tab 
//= require bootstrap/tooltip 
//= require bootstrap/popover 

예를 스타일 시트의 자산 :

// Core variables and mixins 
//@import "bootstrap/variables"; 
@import "bootstrap/mixins"; 
// Reset and dependencies 
@import "bootstrap/normalize"; 
@import "bootstrap/print"; 
// Core CSS 
@import "bootstrap/reboot"; 
@import "bootstrap/type"; 
@import "bootstrap/images"; 
//@import "bootstrap/code"; 
@import "bootstrap/grid"; 
@import "bootstrap/tables"; 
@import "bootstrap/forms"; 
@import "bootstrap/buttons"; 
// Components 
@import "bootstrap/animation"; 
@import "bootstrap/dropdown"; 
@import "bootstrap/button-group"; 
//@import "bootstrap/input-group"; 
//@import "bootstrap/custom-forms"; 
@import "bootstrap/nav"; 
@import "bootstrap/navbar"; 
@import "bootstrap/card"; 
@import "bootstrap/breadcrumb"; 
@import "bootstrap/pagination"; 
@import "bootstrap/pager"; 
@import "bootstrap/labels"; 
//@import "bootstrap/jumbotron"; 
@import "bootstrap/alert"; 
@import "bootstrap/progress"; 
@import "bootstrap/media"; 
@import "bootstrap/list-group"; 
@import "bootstrap/responsive-embed"; 
@import "bootstrap/close"; 
// Components w/ JavaScript 
//@import "bootstrap/modal"; 
@import "bootstrap/tooltip"; 
@import "bootstrap/popover"; 
//@import "bootstrap/carousel"; 
// Utility classes 
@import "bootstrap/utilities"; 
@import "bootstrap/utilities-background"; 
@import "bootstrap/utilities-spacing"; 
@import "bootstrap/utilities-responsive"; 

이 두 파일은 단순히 부트 스트랩 보석에서 복사 된 버전입니다. variables.scss은 부트 스트랩 보석의 표준 변수 파일이기도합니다. 로드하는 대상과로드하지 않는 대상을 모두 제어 할 수있는 레일즈 프로젝트에 부트 스트랩을 포함시키는 것이 가장 좋은 방법이라고 생각합니다.