私はレールに新しいです

Question

私のカスタムCSSでレール内のブートストラップCSSを上書きすることはできませんし、私は非常に下部に

@import "bootstrap-sprockets" 
@import "bootstrap" 

を追加することにより、ブートストラップを追加することの一部に着いたとき、このチュートリアルhttps://launchschool.com/blog/integrating-rails-and-bootstrap-part-1#css_preprocessors次ましたapplication.css.sassそれはすべて正常にうまくいった。しかし、私は尊敬されていませんでしたコード

html, body{background:#000;color:#FFF;}

のラインを持っていました。周りを見た後、私はそれがために自分のアプリケーションファイルのだということを実現：

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
* files in this directory. Styles in this file should be added after the last require_* statement. 
* It is generally better to create a new file per style scope. 
* 
*= require_tree . 
*= require_self 
*= require custom 
*/ 
@import "bootstrap-sprockets" 
@import "bootstrap" 

私は「ブートストラップ」は一番下にあるので、私はそれを移動する場合、それは、しかし、ウェブサイトで使用されるCSSであることを理解します上または他の場所で、私はエラーページを取得します。ブートストラップをインポートしたり、ページを上書きするための別の方法がありますか？

Answer 1

私はhttps://github.com/rails/sprockets#the-require_self-directive

を引用require_self指令

require_selfは、後続のディレクティブを必要とする前に、現在のソースファイルの身体を挿入するようにスプロケットを伝えます。

これは、CSSがカスケードスタイルシートの略としてあなたrequire_selfが、その後、ブートストラップをインポートする場合という、最後のスタイルが常に適用プラスCSS特異のルールとなることを意味します。 以下のリンクでCSSの特異性についてお読みください http://cssspecificity.com/

問題が解決したら、テストすることが重要です。あなたはまだ疑問を持っている場合はapplication.css.scssがローカルホストにロードされているか確認し、

*= require_tree . 
*= require_self 
*= require custom 
*/ 
@import "bootstrap-sprockets" 
@import "bootstrap" 
@import "my-css-style" 

：3000 /資産/ application.cssあなたのCSSやSCSSコードは別のファイルで示唆されているように代替は、以下を含むことになります.scssを使ってさまざまなスタイルシートが1つのファイルにどのように読み込まれているかを確認してから、chrome/firefoxのデバッグを行い、どちらが優先されているかを調べるまですべてのスタイルを無効にします。