Octpressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について

前回、Octpressのテーマをカスタマイズするという記事で、 Octpressに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.

上の文はOctpressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。

しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。

OctpressのCSS生成の仕組み

Octpressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん)

SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。

本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。

というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。

1
2
3
4
5
// Custom
@import "custom/colors";
@import "custom/fonts";
@import "custom/layout";
@import "custom/styles";

後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 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