Octopressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について 前回、Octopressのテーマをカスタマイズするという記事で、 Octopressにbootstrap-themeを導入しました。 If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade. 上の文はOctopressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。 しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。 OctopressのCSS生成の仕組み Octopressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん) SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。 本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。 というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。 // Custom @import "custom/colors"; @import "custom/fonts"; @import "custom/layout"; @import "custom/styles"; 後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。 // This File is imported last, and will override other styles in the cascade // Add styles here to make changes without digging in too much div.