私のapplication.css.scssファイルにブートストラップを含める適切な方法は何ですか？

Question

私はRails 4.2.3を使用しています。私はこのファイル、app/assets/stylesheets/application.css.scssを持っています（なぜ私がプロジェクトを作成したときに、Railsが自動的にこのファイルを作成したのか尋ねません）。

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

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

ブートストラップを追加したいと思っていました。さまざまなチュートリアルでは、「@import」ステートメントを追加して動作させることをお勧めしました。

Sass::SyntaxError in Users#edit 

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

をだから私は

… 
*= 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; 
} 

を試してみましたが、私は私のページをロードするとき、今、私はエラーを取得する私の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 app/assets/stylesheetsとapp/assets/javascriptsにフォルダbootstrap_and_overridesを作成します。

//= 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のためのあなたのjavascript資産の

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"; 

この2つのファイルは、単純に、ブートストラップ宝石からコピーされたバージョンです。 variables.scssは、ブートストラップ・ジェムからの標準変数ファイルでもあります。 これは、ロードするものとロードしないものを完全に制御して、あなたのレールプロジェクトにブートストラップを組み込む最良の方法だと思います。