結論
ファイル名をstyle.css
としていた場合、styles.css
に変更する。
詳細な原因は分からないのですがstyle.css
はJekyll側でnormalizeか何かに使用されているファイル名であり、ブラウザを更新することで自分が作成したstyle.css
より、Jekyllのstyle.css
が優位となり、その結果スタイルシートは存在してブラウザにも正常に読み込まれているのにスタイルが適用されないという状況が発生したようです。
改めて確認すると、公式チュートリアルでもassets/css/styles.scss
でファイルを作成しています。
追記:
ざっくりした調査ですがjekyll new
直後のデフォルト状態では今回の問題の再現を確認出来なかったため、style.css
はJekyllではなくgem "github-pages"
で使用しているものであるかもしれません。
問題の発生した状況
通常JekyllでSassファイルのコンパイルは_config.yml
にsass: sass_dir: _sass
のように記述して行うと思うのですが、インポート用のファイルに1ファイルずつ@import filename;
を書くのが嫌だったり、@import
が廃止予定が勧告されDartSassの@use
への移行が必要だがこの時点ではJekyllが対応していないといった状況から、独自のコンパイル処理を作成していました。
その際、あまり深く考えずにassets/css/style.css
のように出力していたことで、CSSが反映されない問題に直面することとなりました。
参考
Something in Jekyll is creating Normalize CSS as assets/css/style.css in addition to your own file. When you serve your site, then your custom one comes last and “wins”. On a reload, the Normalize CSS one overwrites the style.css file and “wins”.
I don’t know what is generating the normalize CSS file. Maybe one of the many gems in the github pages gem listed here Dependency versions | GitHub Pages
A fix I found locally was to rename the style.css file to styles.css - which any is more inline with convention in CSS.