Laravel 開發教學：從專案初始化到 Node.js + SASS 打造精美首頁

結合 PHP 的穩定與 Node.js 的高效

在當前的全端開發環境中，Laravel 不僅僅是一個 PHP 框架，它更是一個完整的生態系。對於開發者而言，能夠快速從「專案初始化」進入到「畫面實作」，靠的是 Laravel 對於後端邏輯與前端工具鏈（如 Vite 與 Node.js）的完美整合。

無論您是需要構建企業級的 API，還是追求極致體驗的互動式首頁，掌握 Laravel 的專案結構與現代化 CSS 預處理器 SASS 的應用，將能讓您的開發速度提升數倍。本文將帶領您從安裝環境開始，直到寫出第一個專業首頁。

❙ Laravel 專案初始化：邁向開發的第一步

建立新專案與資料夾結構解析

要開始一個 Laravel 專案，首先確保您的電腦已安裝 Composer 與 PHP。透過指令 composer create-project laravel/laravel my-project，系統會自動下載最新的框架核心。 在 Laravel 的世界裡，「約定優於配置」。

• app/：存放核心 PHP 程式碼。
• resources/views/：存放 HTML 模板的地方。
• routes/web.php：定義首頁網址的入口。

❙ Node.js 與前端工具鏈整合

安裝 Node 依賴並啟動 SASS 編譯

Laravel 現在預設使用 Vite 作為編譯工具。我們需要透過 Node.js 來處理 SASS 與樣式壓縮。

1. 執行 npm install 安裝前端套件。
2. 在專案根目錄建立 resources/sass/app.scss。
3. 配置 vite.config.js，確保 SASS 檔案被正確納入。 這一步能讓開發者在存檔時，網頁自動更新（Hot Module Replacement），大幅縮短除錯時間。

❙ 手把手實作：從 HTML 到 SASS 的首頁設計

使用 Blade 引擎與 HTML 語法

Laravel 的 Blade 引擎讓 PHP 與 HTML 的結合變得非常優雅。在 welcome.blade.php 中，我們可以使用 @extends 與 @section 來規劃頁面佈局，避免重複撰寫相同的導覽列與頁尾。

❙ SASS 變數與嵌套結構應用

相較於傳統 CSS，SASS 讓我們能使用變數（Variables）來管理主色調。

$primary-color: #3490dc;
.hero-section {
    background: $primary-color;
    h1 { font-size: 2rem; }
}

透過這種嵌套寫法，程式碼的可讀性將大幅提升，且易於後續維護。