0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Jekyll】ブラウザを更新した際にCSSが反映されなくなる問題と解決法

Last updated at Posted at 2021-08-11

結論

ファイル名を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.ymlsass: 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.

On any edit, CSS stops working

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?