WEEK3 – DAY4&5 – 實作靜態網頁好難啊!

我認為星期四和星期五的課程可以合併來講，因為有 Lab 課。Lab 課讓我們自由選擇如何運用時間。有些人選擇複習講義，而我則選擇實作我的小專題。

在實作小專題的過程中，像是 Header 的部分，就花了一整天的時間來實作。之所以卡住，主要是因為我對 HTML 和 CSS 的對應關係還不熟悉，對 CSS 的語法和常用功能也不太了解。為了幫助自己，我會先寫下排版需求和注意事項，然後再開始切版。雖然這樣很浪費時間，但我覺得這是基本功和思考過程的一部分。

和 ChatGPT 對話時，常遇到它直接進入細節並產生大量程式碼的情況。這樣的輸出反而讓我卡住，因為當我提出疑問時，程式碼已經很多了，導致要回頭找出有用的部分時，常常和現況不一致。因此，我更希望 ChatGPT 輸出精簡的內容，提供高維度的思考方式，讓我先理解整體思路，再開始實作。

在這樣的嘗試中，時間成本非常高。我目前沒有花太多時間聽課，而是專注在實作上。但在基礎不紮實的情況下，這種方法使得實作過程變得更加耗時，需要不斷碰壁和修正。我不確定這算不算一個好的嘗試，畢竟我沒有這方面的經驗，但這是我目前的學習策略。

第三週的課程讓我感到教學內容有些重複，特別是核心觀念和基礎知識被再次講解。雖然這些都是基礎，但在後端課程中可能還會學到類似內容。我覺得最理想的學習方式是：先複習，上課時實作，然後下課再複習，這樣知識才能真正內化，但可惜時間成本太高，我不覺得能這麼理想，所以我選擇鮮實作。

下週，我預計能完成所有靜態頁面的切版，基本完成小專題。在此基礎上，我想加入一些新功能，例如在右下角加入一個會動的「寵物」小幫手，像是一個可愛的動漫人物。此外，我也想嘗試串接資料庫，但目前對資料庫的概念很模糊，也不清楚前端、後端和資料庫之間如何串接。這種對實際運行狀況的不了解讓我感到非常擔心。

Git 倉庫

1. 編譯 header.scss 和 Bootstrap 整包時，Live Sass Compiler 報錯。
2. 逐步排查，錯誤不是變數覆寫順序或 Bootstrap 本身。
3. 最終確認：Live Sass Compiler 本身有問題，導致錯誤不明顯，需 debug 找到問題。

可能是sass版本、BS5版本衝突問題

• 原以為是 SCSS 順序問題（錯誤方向）。
• Sass · Bootstrap 5 繁體中文文件 – 六角學院 v5.0
• 後來發現引入變數前面 還要先引入function
• 透過開啟 Live Sass 的 Debug 模式，確認實際問題出在編譯器。

解決方案

1. 直接進入 Live Sass: Show Output 確認問題訊息。
2. 簡化引入順序，重新編譯驗證問題：
   • 順序確認： @import "functions"; @import "variables"; // 自訂變數 @import "header"; @import "bootstrap";
3. 排除問題後，重新測試檔案間的互相依賴，逐步解決。

live sass compiler編譯all.scss時，把它編譯成all.css的時候，因為編譯太快，all.css有改動，然後Vite就容易抓不到，導致它沒有辦法正確的套用樣式，如果有遇到Vite 跟live sass compiler衝突，可以參考這篇。

解决Vite hmr热更新失效BUG最近在做Vue3项目时，经常会发生HMR热更新失效的问题，初步排查后排除了路由大小写 – 掘金