【デイトラ】Gulpを静的サイトに導入した際のトラブルシューティングなどなど【Web制作コース実務編DAY23】

こんにちは、Web制作を勉強中のshoheです。

デイトラWeb制作コース実務編DAY23の学習でgulpを静的サイトに導入した際に、cssが反映されないなどのトラブルが発生しました。

cssが反映されない。。【デイトラWeb制作コース実務編DAY23】

gulp.jsやpackage.jsonには問題がないのに、監視してみるとcssが反映されない現象にあたる。

誤字、脱字や階層の間違いなどが原因かと試行錯誤するも検討違いのようです。

style.cssを確かめるとGoogleFontsのurlが途中で改行されているのが見つかりここが原因であると見当をつけました。

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;

700&family=Noto+Sans+JP:wght@400;700&family=Tilt+Neon&display=swap");

cssを反映させる対策【デイトラWeb制作コース実務編DAY23】

;700をとっぱらった形に修正し、再度コンパイルします。

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Noto+Sans+JP:wght@400&family=Tilt+Neon&display=swap");

結果【デイトラWeb制作コース実務編DAY23】

cssが反映されてページの表示が正しくなりました。

700はfontweightの指定のはずだけど、cssで都度指定しているため表示は問題なさそうです。

補足【デイトラWeb制作コース実務編DAY23】

コンパイル時のバグ？でルート上にcssフォルダができたり、そもそもcssフォルダが出力されないことがありました。

このように正しくコンパイルできないときはvscodeの再起動をすると治ったので、上手くいかないときは再起動をオススメします。