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.entry-content {
    h1, h2, h3, h4, h5, h6 {
        line-height: 2;
        margin-top: 30px;
        margin-bottom: 20px;
        padding-left: 10px;
    }
    h1 {
        font-size: 20px;
        background: #eee;  
        border-left: 7px solid #777;  
        margin-top: 50px;
    }
    h2 {
        font-size: 18px;
        border-left:7px solid #ccc;  
        border-bottom:1px solid #ccc;
        margin-top: 40px;
    }
    h3 {
        font-size: 15px;
        border-left:7px solid #ccc;  
    }
    h4 {
        line-height: 1.5;
        font-size: 14px;
        border-bottom:1px solid #ddd;
    }
    h5 {
        line-height: 1.5;
        font-size: 12px;
        border-bottom:1px dashed #ddd;
    }
    h6 {
        line-height: 1.5;
        font-size: 11px;
    }
}

まあ、せいぜいsubsubsectionくらいまでしか使いませんよね…

h1

h2

h3

h4

h5

h6