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

​
什麼情況下適合使用 Less

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

​
範本範例

​
new-less

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

​
在既有擴充功能中使用

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

​
安裝

安裝所需相依套件：

​
在 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

content-less-modules template screenshot 當你需要為注入的 UI 加上具作用域的樣式時，在 content script 中使用 Less modules。 
npx 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 會安裝必要的選用相依套件並提示重新啟動。

​
下一步

​
影片導覽