瀏覽器擴充功能中的 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

deno run -A npm: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

deno run -A npm: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";

​

內容腳本中的網頁字型

export default function initial() {
  const rootDiv = document.createElement("div");
  document.body.appendChild(rootDiv);
  const shadowRoot = rootDiv.attachShadow({ mode: "open" });

  const customFace = new FontFace(
    "Momo Signature",
    `url("${chrome.runtime.getURL("fonts/MomoSignature-Regular.woff2")}")`,
  );

  customFace
    .load()
    .then((face) => document.fonts.add(face))
    .catch(() => {
      // Ignore
    });

  return () => {
    document.fonts.delete(customFace);
    rootDiv.remove();
  };
}

{
  "web_accessible_resources": [
    {
      "resources": ["fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ]
}

​

依情境的輸出行為

​

開發行為

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

​

模組與預處理器

• CSS modules 在擴充功能頁面情境中運作得最好。
• 當你安裝相關相依套件時，Extension.js 會啟用 Sass／Less 支援。
• 如果專案引用了 .scss／.less 檔案但沒有安裝預處理器，建置不會失敗，而是發出警告並把原始檔原封不動地複製過去（不編譯）。瀏覽器會把這份未編譯的原始碼當成壞掉的 CSS，那些畫面就會完全沒有樣式，所以請安裝預處理器以取得真正的編譯。
• 當 Extension.js 偵測到專案中的 PostCSS 設定、或你明確設定時，會自動執行 PostCSS。

​

最佳實務

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

​

後續步驟

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

​

影片導覽