跳轉到主要內容
以 Sass 透過變數、巢狀寫法與 SCSS modules 擴大瀏覽器擴充功能的樣式管理，同時維持單一的建置流程。 Extension.js 透過以 Rspack 為基礎的樣式 pipeline 支援 .scss 與 .sass，以及 SCSS module 變體（.module.scss、.module.sass）。

​
什麼情況下適合使用 Sass

  • 你的設計系統已經依賴 Sass 變數與 mixin。
  • 你需要為元件驅動的擴充功能 UI 採用模組化樣式。
  • 你希望與既有 web app 的 Sass 工作流程一致。

​
範本範例

​
new-sass

new-sass template screenshot 開始一個已設定好 Sass 支援的 new-tab 擴充功能。 
npx extension@latest create my-extension --template=new-sass
Repository: extension-js/examples/new-sass

​
在既有擴充功能中使用

依下列步驟把 Sass 加入既有擴充功能。

​
安裝

安裝所需相依套件：

​
在 HTML 檔中的使用範例

在擴充功能頁面（popup、options、new tab）中，從入口 script 匯入 Sass： 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
    <script src="./main.ts"></script>
  </head>
  <body>
    <h1 class="title">Hello, Extension.</h1>
  </body>
</html>

import "./styles/globals.scss";

console.log("Sass loaded");

​
Sass modules

和 CSS modules 一樣，Sass modules 也能讓樣式具備區域作用域。使用 .module.scss 或 .module.sass 啟用作用域，避免樣式表中的命名衝突。

​
content-sass-modules

content-sass-modules template screenshot 當你需要為注入的 UI 提供具作用域的樣式時，在 content script 中使用 Sass modules。 
npx extension@latest create my-extension --template=content-sass-modules
Repository: extension-js/examples/content-sass-modules

​
在既有擴充功能中使用 Sass modules

若要啟用 Sass modules，請將 Sass 檔案改名為包含 .module.scss 或 .module.sass。這會自動把樣式限定在元件作用域內。 
- button.scss
+ button.module.scss

​
使用範例

把 Sass 檔案改名後，可以在 script 中匯入： 
import styles from "./styles/button.module.scss";

const element = document.createElement("h1");
element.className = styles.primaryColor;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);
在 Sass 檔中： 
/* styles/button.module.scss */

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

​
React／Preact 使用範例

把 Sass module 匯入 React 或 Preact 元件，並使用具作用域的 class 名稱： 
import styles from "./styles/button.module.scss";

export default function MyComponent() {
  return <h1 className={styles.primaryColor}>Hello, Extension!</h1>;
}

​
Vue 使用範例

在 Vue SFC 中，建議使用 lang="scss" 的 module 樣式： 
<template>
  <h1 :class="$style.primaryColor">Hello, Extension!</h1>
</template>

<style lang="scss" module>
@import "./styles/button.module.scss";
</style>

​
Svelte 使用範例

在 Svelte 中，匯入 Sass module 對應後套用 class： 
<script>
  import styles from "./styles/button.module.scss";
</script>

<h1 class={styles.primaryColor}>Hello, Extension!</h1>

​
行為注意事項

  • 在擴充功能頁面中，.module.scss 與 .module.sass 會匯出 class 對應，供 JS/TS 匯入使用。
  • 在 content script 中，Extension.js 會把 Sass 當成 CSS 資源輸出，且不附帶 JavaScript class 名稱對應。
  • 若專案缺少 Sass 相關工具，Extension.js 會安裝必要的選用相依套件並提示重新啟動。

​
下一步

​
影片導覽