テンプレートをカスタマイズ

この章の冒頭で説明したように、追加の CSS はtheme/フォルダーに含まれるファイルに含める必要があります。

theme/ は core/ と同じ構造を持ち、コア スタイルをオーバーライドしたり、カスタム CSS を追加して拡張したりできる場所です。

<h2> タグのデフォルトの色を置き換えて、他の見出しの色のみを維持したいと仮定した場合、theme/base/_typography.scss ファイルを開き、「👇」と入力します。

h2, .h2 {
  color: get-color(primary, 1);
}

ここで、ボタンに影を追加するとします。 theme/elements/_buttons.scss ファイルを開き、「👇」と入力します。

.button {
  box-shadow: 0 8px 20px rgba(get-color(dark, 1), .1);
}

CSS のカスケード優先度の場合、theme/フォルダー内で行われたすべての変更はcore/スタイルをオーバーライドします。