靜態資源與 CSS 處理
圖片、字型、CSS 是幾乎每個前端專案都會用到的資源。Vite 對這些資源提供開箱即用的處理方式，不需要額外設定 loader，本頁說明常見用法與需要注意的細節。
import 圖片與檔案
在 src/ 內可以直接 import 圖片、SVG 等檔案，Vite 會回傳處理後的最終路徑：
import logo from './assets/logo.png'
document.querySelector('#app').innerHTML = `<img src="../${logo}" />`
打包時，Vite 會依檔案大小決定處理方式：
- 小於預設門檻（4 KB）的檔案：轉為 base64 內嵌到 JavaScript／CSS 中，省去一次額外的網路請求。
- 大於門檻的檔案：複製到輸出目錄，檔名加上內容雜湊，並回傳雜湊後的路徑，方便長效快取。
這個門檻可透過 vite.config 的 build.assetsInlineLimit 調整。
public/ 目錄：不經處理的資源
若某個檔案需要以固定、可預期的路徑存取（例如 favicon.ico、robots.txt，或需要寫死在 HTML <meta> 標籤裡的圖片），應放在專案根目錄的 public/，並用絕對路徑引用：
public/ 內的檔案建置時會原封不動複製到輸出目錄，不會被雜湊、不會被壓縮，也不能被 JavaScript import。兩種方式的選擇原則：需要固定檔名或路徑 → 放 public/；其餘一般資源 → 用 import，讓 Vite 幫忙做快取與最佳化。
CSS 與預處理器
Vite 對 CSS 提供原生支援，直接 import '.css' 即可：
也支援 @import、CSS Modules（檔名為 *.module.css 會自動啟用）。若要使用 Sass、Less、Stylus 等預處理器，只需要安裝對應套件，不需要額外設定 Vite：
安裝完成後，直接 import './style.scss' 即可，Vite 會自動偵測副檔名並呼叫對應的預處理器。
PostCSS 與 Tailwind CSS
Vite 內建支援 PostCSS，只要專案根目錄有 postcss.config.js，就會自動套用。這也是 Tailwind CSS 等以 PostCSS 為基礎的工具能與 Vite 無縫整合的原因——安裝對應套件並設定好 postcss.config，不需要另外調整 vite.config。