在浏览器扩展中使用 Less CSS

用一条同样支持模块作用域样式的管线，在扩展页面和 UI 组件中使用 Less CSS。 Extension.js 会检测项目中是否使用了 Less，自动在 Rspack 构建中配置预处理器，并支持浏览器扩展中的 .less 和 .module.less 文件。

什么场景适合用 Less

你在迁移一个基于 Less 的现有 web 代码库。
你希望以较低的迁移成本获得变量与嵌套写法。
你需要模块作用域的样式，同时又想保留 Less 的写法约定。

模板示例

`new-less`

启动一个已配置好 Less 支持的新标签页扩展。

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

仓库：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/新标签页）里，通过脚本入口引入 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 模块

像 CSS 模块一样，用 Less 模块把类名限定在本地作用域。这能默认避免全局样式冲突——这一点对扩展尤其重要，因为 content script 运行在宿主页面的 CSS 作用域内。

`content-less-modules`

当注入 UI 需要作用域样式时，在 content script 中使用 Less 模块。

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

仓库：extension-js/examples/content-less-modules

在现有扩展中使用 Less 模块

要启用 Less 模块，把 .less 文件重命名为 .module.less。这会自动开启类名的本地作用域。

- myStyles.less
+ myStyles.module.less

用法示例

重命名 Less 文件后，你可以在脚本中导入它：

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 模块并像在其他组件里一样应用样式：

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 模块映射并应用类名：

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

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

行为说明

在扩展页面上下文里，.module.less 会按预期导出类名映射。
在 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 模块。
在扩展中配置 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 模块

`content-less-modules`

在现有扩展中使用 Less 模块

用法示例

React/Preact 用法示例

Vue 用法示例

Svelte 用法示例

行为说明

关于 `less` 的安装后警告

下一步

视频讲解

​什么场景适合用 Less

​模板示例

​new-less

​在现有扩展中使用

​安装

​在 HTML 文件中的用法

​在 content_script 文件中

​在浏览器扩展中使用 Less 模块

​content-less-modules

​在现有扩展中使用 Less 模块

​用法示例

​React/Preact 用法示例

​Vue 用法示例

​Svelte 用法示例

​行为说明

​关于 less 的安装后警告

​下一步

​视频讲解

什么场景适合用 Less

模板示例

`new-less`

在现有扩展中使用

安装

在 HTML 文件中的用法

在 `content_script` 文件中

在浏览器扩展中使用 Less 模块

`content-less-modules`

在现有扩展中使用 Less 模块

用法示例

React/Preact 用法示例

Vue 用法示例

Svelte 用法示例

行为说明

关于 `less` 的安装后警告

下一步

视频讲解