> ## 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.
# 在浏览器扩展中使用 Less CSS
> 在扩展页面和 UI 组件中使用 Less CSS 与 Less 模块。Extension.js 会为 .less 文件配置 Rspack 预处理器。
用一条同样支持模块作用域样式的管线，在扩展页面和 UI 组件中使用 Less CSS。
Extension.js 会检测项目中是否使用了 Less，自动在 Rspack 构建中配置预处理器，并支持浏览器扩展中的 `.less` 和 `.module.less` 文件。
## 什么场景适合用 Less
* 你在迁移一个基于 Less 的现有 web 代码库。
* 你希望以较低的迁移成本获得变量与嵌套写法。
* 你需要模块作用域的样式，同时又想保留 Less 的写法约定。
## 模板示例
### `new-less`
启动一个已配置好 Less 支持的新标签页扩展。
```bash npm theme={null}
npx extension@latest create my-extension --template=new-less
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=new-less
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=new-less
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-less
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-less
```
仓库：[extension-js/examples/new-less](https://github.com/extension-js/examples/tree/main/examples/new-less)
## 在现有扩展中使用
按下面的步骤把 Less 添加到现有扩展。
### 安装
安装所需依赖：
### 在 HTML 文件中的用法
在扩展页面（popup/options/新标签页）里，通过脚本入口引入 Less：
```html theme={null}
New Extension
Hello, Extension.
```
```ts theme={null}
import "./styles/globals.less";
console.log("Less loaded");
```
### 在 `content_script` 文件中
```ts theme={null}
import "./styles/content.less";
console.log("Content styles loaded");
```
## 在浏览器扩展中使用 Less 模块
像 CSS 模块一样，用 Less 模块把类名限定在本地作用域。这能默认避免全局样式冲突——这一点对扩展尤其重要，因为 content script 运行在宿主页面的 CSS 作用域内。
### `content-less-modules`
当注入 UI 需要作用域样式时，在 content script 中使用 Less 模块。
```bash npm theme={null}
npx extension@latest create my-extension --template=content-less-modules
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=content-less-modules
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=content-less-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-less-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-less-modules
```
仓库：[extension-js/examples/content-less-modules](https://github.com/extension-js/examples/tree/main/examples/content-less-modules)
## 在现有扩展中使用 Less 模块
要启用 Less 模块，把 `.less` 文件重命名为 `.module.less`。这会自动开启类名的本地作用域。
```diff theme={null}
- myStyles.less
+ myStyles.module.less
```
### 用法示例
重命名 Less 文件后，你可以在脚本中导入它：
```ts theme={null}
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 模块并像在其他组件里一样应用样式：
```jsx theme={null}
import styles from "./styles/myStyles.module.less";
export default function MyComponent() {
return Hello, Extension!
;
}
```
## Vue 用法示例
在 Vue 中，优先在单文件组件（SFC）样式中使用 `lang="less"` 加 `module`：
```vue theme={null}
Hello, Extension!
```
## Svelte 用法示例
在 Svelte 中，导入 Less 模块映射并应用类名：
```svelte theme={null}
Hello, Extension!
```
## 行为说明
* 在扩展页面上下文里，`.module.less` 会按预期导出类名映射。
* 在 content script 中，Extension.js 会把样式作为 CSS 资源输出，并以样式表的方式注入页面。
* 如果项目缺少 Less 工具链，Extension.js 会安装可选依赖并提示重启。
## 下一步
* 进一步了解 [CSS 模块](/docs/languages-and-frameworks/css-modules)。
* 在扩展中配置 [PostCSS](/docs/integrations/postcss)。
## 视频讲解