> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.
# 在瀏覽器擴充功能中使用 Sass 與 SCSS modules
> 以 Sass 變數、巢狀寫法與 SCSS modules 擴大擴充功能的樣式管理。Extension.js 透過 Rspack 支援 .scss、.sass 與 .module 變體。
以 Sass 透過變數、巢狀寫法與 SCSS modules 擴大瀏覽器擴充功能的樣式管理，同時維持單一的建置流程。
Extension.js 透過以 Rspack 為基礎的樣式 pipeline 支援 `.scss` 與 `.sass`，以及 SCSS module 變體（`.module.scss`、`.module.sass`）。
## 什麼情況下適合使用 Sass
* 你的設計系統已經依賴 Sass 變數與 mixin。
* 你需要為元件驅動的擴充功能 UI 採用模組化樣式。
* 你希望與既有 web app 的 Sass 工作流程一致。
## 範本範例
### `new-sass`
開始一個已設定好 Sass 支援的 new-tab 擴充功能。
```bash npm theme={null}
npx extension@latest create my-extension --template=new-sass
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=new-sass
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=new-sass
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-sass
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-sass
```
Repository: [extension-js/examples/new-sass](https://github.com/extension-js/examples/tree/main/examples/new-sass)
## 在既有擴充功能中使用
依下列步驟把 Sass 加入既有擴充功能。
### 安裝
安裝所需相依套件：
### 在 HTML 檔中的使用範例
在擴充功能頁面（popup、options、new tab）中，從入口 script 匯入 Sass：
```html theme={null}
New Extension
Hello, Extension.
```
```ts theme={null}
import "./styles/globals.scss";
console.log("Sass loaded");
```
## Sass modules
和 CSS modules 一樣，Sass modules 也能讓樣式具備區域作用域。使用 `.module.scss` 或 `.module.sass` 啟用作用域，避免樣式表中的命名衝突。
### `content-sass-modules`
當你需要為注入的 UI 提供具作用域的樣式時，在 content script 中使用 Sass modules。
```bash npm theme={null}
npx extension@latest create my-extension --template=content-sass-modules
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=content-sass-modules
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=content-sass-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-sass-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-sass-modules
```
Repository: [extension-js/examples/content-sass-modules](https://github.com/extension-js/examples/tree/main/examples/content-sass-modules)
## 在既有擴充功能中使用 Sass modules
若要啟用 Sass modules，請將 Sass 檔案改名為包含 `.module.scss` 或 `.module.sass`。這會自動把樣式限定在元件作用域內。
```diff theme={null}
- button.scss
+ button.module.scss
```
### 使用範例
把 Sass 檔案改名後，可以在 script 中匯入：
```ts theme={null}
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 檔中：
```scss theme={null}
/* styles/button.module.scss */
$primary-color: #64ff00;
:export {
primaryColor: $primary-color;
}
```
## React／Preact 使用範例
把 Sass module 匯入 React 或 Preact 元件，並使用具作用域的 class 名稱：
```jsx theme={null}
import styles from "./styles/button.module.scss";
export default function MyComponent() {
return Hello, Extension!
;
}
```
## Vue 使用範例
在 Vue SFC 中，建議使用 `lang="scss"` 的 module 樣式：
```vue theme={null}
Hello, Extension!
```
## Svelte 使用範例
在 Svelte 中，匯入 Sass module 對應後套用 class：
```svelte theme={null}
Hello, Extension!
```
## 行為注意事項
* 在擴充功能頁面中，`.module.scss` 與 `.module.sass` 會匯出 class 對應，供 JS/TS 匯入使用。
* 在 content script 中，Extension.js 會把 Sass 當成 CSS 資源輸出，且不附帶 JavaScript class 名稱對應。
* 若專案缺少 Sass 相關工具，Extension.js 會安裝必要的選用相依套件並提示重新啟動。
## 下一步
* 進一步了解 [CSS modules](/docs/languages-and-frameworks/css-modules)。
* 透過 [Stylelint](/docs/integrations/stylelint) 維持樣式表品質。
## 影片導覽