bootstrap-sassで苦戦したあれこれ
bootstrap-sassを導入する中でのTips。
application.css.scssでrequire_tree、require_selfは使えない。
github.com
sassを使う場合、公式に、
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
みたいなことが書いてあったので、なるほど、わからんと思ってたら、日本語の説明みつけた。
ja.asciicasts.com
中段くらいのエラー説明。
require_tree .の行は、Sprocketsに対してstylesheetsディレクトリ内のすべてのファイルをincludeするよう指示しています。問題は、SASSファイルは結合される前に別々にCSSファイルにコンパイルされるため、変数がファイル間で共有されないのです。
これを解決するためには、require_tree .を取り除いてその代わりにSASSに各スタイルシートをインポートさせます。このアプローチの利点は、ファイルが読み込まれる順番を定義できることです。
require_treeを使用する場合、ファイルを読み込む順番を決めることはできません。それでは、まずapplication.cssファイルの名前をapplication.css.scssに変更します。そしてrequire_treeの行を削除し、代わりにスタイルシートをインポートします。
ほへー。
外部リソースを入れるときは /vendor を使う
shin.hateblo.jp
このへん参照。
プロその２にも教えてもらった。
bootstrapのテンプレを使ったりするときにcssやらjsやらを参照する場合、app/assets配下に置くよりも、外部リソースだということを明確にするためにvendor/asset配下に置いた方がいろいろ捗るみたい。
参照方法も変わらないので、単純に置く場所の問題なのかな。
scaffold使わない時はhtml.erbだけじゃなくコントローラが必要だということを忘れない
tech-outlines.hateblo.jp
bootstrapのhtmlページを参照しよう
→ view配下にそのままhtmlコピペ
→ あれ？うごかない…ルートも通らない…"Routing Error uninitialized constant xxxxxController" ってなんぞ…
→ xxxxxのコントローラがありませんでした。
というオチ。ちなみにコントローラ作ってもアクション定義しないと"Unknown action"って言われます。
今までずっとscaffoldでジェネレートしていたので、コントローラないとだめなの忘れてた。
追記
別にコントローラなくても大丈夫です。コントローラが必要なのはerbの中でアクション指定している場合。
ていうかむしろできるだけ既存のコントローラの中でやれ。→scaffoldに頼るな
画像呼び出しの書き方が Rails4 から変わっているらしい
qiita.com
CSSの background: url( 相対パス ) はあんまよくないらしい。
というよりも、app/assets/imagesを使うとproduction環境で動かないらしい。
とりあえずは、この中にあった、publicフォルダに突っ込む方式でやってみる。
ディレクトリ上では「/public/assets/xxxxx.jpg」だけども、CSSではサブディレクトリが省略されて「/assets/back.jpg」となることに注意。
とりあえずいろいろおかしいものの、bootstrapのテンプレを適用することはできた！！
あとは見せれるように整形するのだ
ためしに文字をちょっとはっきりさせたいので縁取りする方法。
