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

以單一 pipeline 在擴充功能頁面與 UI 元件之間使用 Less CSS，同時支援模組化作用域樣式。 Extension.js 會偵測 Less 的使用情況，並在 Rspack 建置中設定預處理器，同時支援 .less 與 .module.less 檔案。

什麼情況下適合使用 Less

你正在遷移既有以 Less 為主的 web 程式碼庫。
你想以低遷移成本取得變數與巢狀寫法。
你需要模組化作用域樣式，又要維持 Less 的慣例。

範本範例

`new-less`

開始一個已設定好 Less 支援的 new-tab 擴充功能。

npx extension@latest create my-extension --template=newtab-less

pnpx extension@latest create my-extension --template=newtab-less

yarn dlx extension@latest create my-extension --template=newtab-less

bunx extension@latest create my-extension --template=newtab-less

deno run -A npm:extension@latest create my-extension --template=newtab-less

Repository: extension-js/examples/newtab-less

在既有擴充功能中使用

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

安裝

安裝所需相依套件：

npm install -D less less-loader

pnpm add -D less less-loader

yarn add -D less less-loader

bun add -d less less-loader

deno add -D npm:less npm:less-loader

在 HTML 檔中的使用範例

在擴充功能頁面（popup、options、new tab）中，從 script 入口匯入 Less：

<!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.less";

console.log("Less loaded");

在 `content_script` 檔中

import "./styles/content.less";

console.log("Content styles loaded");

在瀏覽器擴充功能中使用 Less modules

和 CSS modules 一樣，Less modules 也能讓 class 名稱限定在區域作用域中。這在擴充功能中尤其重要，因為 content script 會在宿主頁面的 CSS 範圍內執行，預設的局部作用域可避免全域樣式衝突。

`content-less-modules`

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

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

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

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

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

deno run -A npm:extension@latest create my-extension --template=content-less-modules

Repository: extension-js/examples/content-less-modules

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

若要啟用 Less modules，請把 .less 檔改名為包含 .module.less。這會自動為 class 名稱套用區域作用域。

- myStyles.less
+ myStyles.module.less

使用範例

把 Less 檔案改名後，可以在 script 中匯入：

import styles from "./styles/myStyles.module.less";

const element = document.createElement("h1");
element.className = styles.primary;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);

React／Preact 使用範例

要在 React 或 Preact 中使用 Less modules，匯入你的 Less module 並像一般元件一樣套用樣式：

import styles from "./styles/myStyles.module.less";

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

Vue 使用範例

在 Vue 中，建議在 SFC 中使用 lang="less" 與 module 樣式：

<template>
  <h1 :class="$style.primary">Hello, Extension!</h1>
</template>

<style lang="less" module>
@import "./styles/myStyles.module.less";
</style>

Svelte 使用範例

在 Svelte 中，匯入 Less module 對應後套用 class：

<script>
  import styles from "./styles/myStyles.module.less";
</script>

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

行為注意事項

在擴充功能頁面情境下，.module.less 會如預期匯出 class 對應。
在 content script 中，Extension.js 會把樣式當成 CSS 資源輸出，並以樣式表的方式注入頁面。
若沒有安裝 less 套件，Extension.js 會提出警告，並把原始的 Less 原始碼直接複製進輸出的 CSS，因此在你自行安裝它之前，這些介面會以無樣式的狀態呈現。

關於 `less` 的安裝後警告

在某些套件管理器下，安裝一個使用 Less 的專案時，可能會出現「less 的建置指令稿未被執行」的通知（pnpm 會印出 Ignored build scripts: less，並請你核准它們）。這是預期之中的行為，可以安全忽略。 Extension.js 透過自己的打包管線編譯 Less，因此並不依賴 Less 那個選用的安裝後步驟（它只是在 Less 自己的儲存庫裡設定 Playwright，對使用者而言是空操作）。無論是哪一種情況，你的 .less 與 .module.less 檔案的建置與熱重載都完全相同。由樣板產生的專案不會帶有 pnpm.ignoredBuiltDependencies 鍵，所以用 pnpm 安裝 Less 樣板時，會像其他專案一樣顯示這則通知。npm 與 yarn 預設會執行該指令稿，什麼也不會印出。如果你遇到這則通知，有兩種等效的方式可以讓它安靜下來：

略過它（建議）：在你的 package.json 加上 pnpm.ignoredBuiltDependencies: ["less"]。這等於確認了這個指令稿，但不去執行這個空操作。
執行它：執行 pnpm approve-builds 並選擇 less，或加上 pnpm.onlyBuiltDependencies: ["less"]。無害，只是沒有必要。

對典型的 Extension.js 專案來說，兩種做法在功能上沒有任何差別。

下一步

進一步了解 CSS modules。
在擴充功能中設定 PostCSS。

Introduction

Browser extension fundamentals

Getting started

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

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

什麼情況下適合使用 Less

範本範例

`new-less`

在既有擴充功能中使用

安裝

在 HTML 檔中的使用範例

在 `content_script` 檔中

在瀏覽器擴充功能中使用 Less modules

`content-less-modules`

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

使用範例

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

行為注意事項

關於 `less` 的安裝後警告

下一步

影片導覽

​什麼情況下適合使用 Less

​範本範例

​new-less

​在既有擴充功能中使用

​安裝

​在 HTML 檔中的使用範例

​在 content_script 檔中

​在瀏覽器擴充功能中使用 Less modules

​content-less-modules

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

​使用範例

​React／Preact 使用範例

​Vue 使用範例

​Svelte 使用範例

​行為注意事項

​關於 less 的安裝後警告

​下一步

​影片導覽

什麼情況下適合使用 Less

範本範例

`new-less`

在既有擴充功能中使用

安裝

在 HTML 檔中的使用範例

在 `content_script` 檔中

在瀏覽器擴充功能中使用 Less modules

`content-less-modules`

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

使用範例

React／Preact 使用範例

Vue 使用範例

Svelte 使用範例

行為注意事項

關於 `less` 的安裝後警告

下一步

影片導覽