在瀏覽器擴充功能中使用 Sass 與 SCSS modules

以 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 擴充功能。

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

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

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

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

bunx 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`

當你需要為注入的 UI 提供具作用域的樣式時，在 content script 中使用 Sass modules。

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

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

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

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

bunx 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 會安裝必要的選用相依套件並提示重新啟動。

下一步

進一步了解 CSS modules。
透過 Stylelint 維持樣式表品質。

影片導覽

在瀏覽器擴充功能中使用 Less CSS 在瀏覽器擴充功能中使用 Node API

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

在瀏覽器擴充功能中使用 Sass 與 SCSS modules

什麼情況下適合使用 Sass

範本範例

`new-sass`

在既有擴充功能中使用

安裝

在 HTML 檔中的使用範例

Sass modules

`content-sass-modules`

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

使用範例

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

行為注意事項

下一步

影片導覽

​什麼情況下適合使用 Sass

​範本範例

​new-sass

​在既有擴充功能中使用

​安裝

​在 HTML 檔中的使用範例

​Sass modules

​content-sass-modules

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

​使用範例

​React／Preact 使用範例

​Vue 使用範例

​Svelte 使用範例

​行為注意事項

​下一步

​影片導覽

什麼情況下適合使用 Sass

範本範例

`new-sass`

在既有擴充功能中使用

安裝

在 HTML 檔中的使用範例

Sass modules

`content-sass-modules`

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

使用範例

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

行為注意事項

下一步

影片導覽