瀏覽器擴充功能中的 CSS、Sass 與 Less

​

範本範例

​

content-sass

npx extension@latest create my-extension --template=content-sass

pnpx extension@latest create my-extension --template=content-sass

yarn dlx extension@latest create my-extension --template=content-sass

bunx extension@latest create my-extension --template=content-sass

bunx extension@latest create my-extension --template=content-sass

​

content-custom-font

npx extension@latest create my-extension --template=content-custom-font

pnpx extension@latest create my-extension --template=content-custom-font

yarn dlx extension@latest create my-extension --template=content-custom-font

bunx extension@latest create my-extension --template=content-custom-font

bunx extension@latest create my-extension --template=content-custom-font

​

CSS 能力

​

在哪裡參考 CSS

• manifest.json（content_scripts[].css）
• HTML 檔案（<link rel="stylesheet" href="...">）
• Script 中的 import（import "./styles.css"，啟用時也包含 Sass／Less）

​

CSS 支援

​

範例：manifest.json 中的 CSS

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["./styles/content.css"],
      "js": ["./scripts/content.ts"]
    }
  ]
}

​

範例：在擴充功能頁面 script 中引用 CSS

import "./styles/popup.scss";

​

依情境的輸出行為

​

開發行為

• Content script 的 CSS import 會參與 content script 的 HMR／重新掛載流程。
• Extension.js 會為純 CSS 的 content script 進入點加上開發輔助 script，讓更新可以傳播。
• 頁面 CSS 會走標準的頁面 HMR 流程。
• 結構性 manifest／content script 變更仍可能需要重新載入或重新啟動整個擴充功能。

​

模組與預處理器

• CSS modules 在擴充功能頁面情境中運作得最好。
• 當你安裝相關相依套件時，Extension.js 會啟用 Sass／Less 支援。
• 當 Extension.js 偵測到專案中的 PostCSS 設定、或你明確設定時，會自動執行 PostCSS。

​

最佳實務

• 刻意限制 content script 樣式範圍，降低與主機頁面的衝突。
• 為擴充功能頁面 UI 優先採用元件本地的 module 樣式。
• 明確保留預處理器與 PostCSS 設定，避免建置設定隨時間意外改變。
• 在持續整合（CI）中驗證被 manifest 欄位參考的 CSS 路徑。

​

後續步驟

• 在 dev 更新行為中了解更新結果。
• 進一步了解 CSS modules。
• 進一步了解 PostCSS 整合。