Hugoサイトでcssを上書きする（Theme使用）

ようやくNetlifyでHugoサイトを公開しましたが、元のThemeのままです。

少しずつカスタマイズしていこうと思います。

☆使っているテーマは「hugo-clarity」です。

sassファイルを確認してみる

デザインを変えたいのでcssを調べます。
cssファイルは見当たらず、sasファイルを見つけました。

hugo_site2021/themes/hugo-clarity/assets/sass/_custom.sass を開くと、コメントがあります。

_custom.sass

// add customs styles and general overrides here
// due to the cascading nature of css, if you try to override theme css variables in this file, those changes will not apply. Instead, override css variables in the override.sass file
// we recommend not editing this file directly. Instead, create an assets/sass/_custom.sass file at the root level of your site.
// if you edit this file directly, you will have to resolve git conflicts when and if you decide to pull changes we make on the theme

翻訳すると

カスタムスタイルと一般的なオーバーライドをここに追加します。
css のカスケードの性質上、このファイルでテーマの css 変数をオーバーライドしようとしても、その変更は適用されません。代わりに、override.sass ファイルで css 変数を上書きしてください。
このファイルを直接編集しないことをお勧めします。代わりに、サイトのルートレベルに assets/sass/_custom.sass ファイルを作成してください。
このファイルを直接編集すると、私たちがテーマに加えた変更を引き出そうとしたときに、gitコンフリクトを解決しなければならなくなります。

ということです。

override.sass ファイルとは同じ階層の _override.sass のことでしょうか。

_override.sass

// override clarity theme's _variables.sass file.
// we recommend not editing this file directly. Instead, create an assets/sass/_override.sass file at the root level of your site.
// if you edit this file directly, you will have to resolve git conflicts when and if you decide to pull changes we make on the theme

翻訳すると

クラリティテーマの _variables.sass ファイルをオーバーライドします。
このファイルを直接編集しないことをお勧めします。代わりに、サイトのルートレベルに assets/sass/_override.sass ファイルを作成してください。
このファイルを直接編集すると、私たちがテーマに加えた変更を引き出そうとしたときに、gitコンフリクトを解決しなければならなくなります。

だそうです。
んん？

ついでに _variables.sass ファイルを見てみます。

_variables.sass ファイルの中身はその名の通り変数と設定値が書かれています。

まとめると

ファイル	役割	代わりのファイル
_custom.sass	カスタムスタイル（オーバーライドは適用されない）	ルートディレクトリに assets/sass/_custom.sass
_override.sass	_variables.sassをオーバーライド	ルートディレクトリに assets/sass/_override.sass
_variables.sass	変数の設定	_override.sass

assets/sass/_custom.sass → 一般的なスタイルの上書き
assets/sass/_override.sass → 変数の設定値の変更

と考えられます。

Theme内のsassファイルに書くと、使っているテーマがGitHubで更新された時、プル（コミット？）をしたらコンフリクトするようです。
（Gitの submodule コマンド。まだ手を出さなくていいかなと思っています）

ということは、基本カスタマイズはテーマディレクトリの上のファイルを触ることになるのだと思います。

コメントに従ってassets/sass/ にcustom.sassファイルとoverride.sassファイルを作りました。

試しにbody要素の背景色を変えてみます。

テーマ内の_variables.sass

html
  --color-mode: 'lit'
  --light: #fff
  --dark: #000
  --bg: #002538
  --haze: #f2f2f2

と書かれているので、--haze の部分を同じように書いてみます。

普段書かない書き方です。省略形でしょうか。

_override.sass

html
  --haze: linen

すると見事上書きされました！

ちなみに linen はカラーの名称です（ベージュの薄い色）。
初めて使ってみました。たくさんありますね。

cssの仕組み

デベロッパーツールを見たところ、テーマファイルの中の _base.css に変数が使われていて、その変数が _variables.sass、_custom.sass で設定されていました。

そしてテーマ内のsassディレクトリ内に唯一_ の付いていない main.sass を見てみると、諸々のsassファイルを @import していました。
コンパイル不要の場合は _ を付けるはずなので、main.sass ファイルはおそらくどこかでコンパイルされているのでしょう。

図にしてみました。 ※「scss」は「sass」です。間違えました。

マップファイルが使われている

デベロッパーツールで設定元のsassファイルが確認できるということは、マップファイルが使われているということです。

実際にページで読み込んでいるのは styles.css ファイルでした。
（実際は styles. の後ろに長い謎のパラメータ？が付いています）

もしかすると main.sass がコンパイルされてstyles.cssになったのかもしれません （ファイル名が異なるのが気になります）

以前の記事を確認してデベロッパーツールから styles.css を見てみると、

/*# sourceMappingURL=styles.css.map */

sourceMappingURLアノテーションがありました！
しかし styles.css.map ファイルは見つかりませんでした。

さいごに

触れるcssは assets/sass/_custom.sass と assets/sass/_override.sass であることがわかりました。

マップファイルとcssファイルはおそらく動的に作られているのでしょう。

まだまだ謎だらけのHugoサイトですが、デザイン変更などできるところから進めていきます！

ロゴやブログ名を変えなくては。