> ## 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.
# 在浏览器扩展中使用 Sass 与 SCSS 模块
> 用 Sass 的变量、嵌套和 SCSS 模块扩展浏览器扩展样式。Extension.js 通过 Rspack 支持 .scss、.sass 及其 .module 变体。
用 Sass 的变量、嵌套和 SCSS 模块扩展浏览器扩展样式，同时保留单一的构建工作流。
Extension.js 通过基于 Rspack 的样式管线支持 `.scss` 和 `.sass`，以及 SCSS 模块变体（`.module.scss`、`.module.sass`）。
## 什么场景适合用 Sass
* 你的设计系统已经依赖 Sass 变量和 mixin。
* 你需要为组件化的扩展 UI 编写模块化样式。
* 你希望与 web 应用里既有的 Sass 工作流保持一致。
## 模板示例
### `new-sass`
启动一个已配置好 Sass 支持的新标签页扩展。
```bash npm theme={null}
npx extension@latest create my-extension --template=new-sass
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=new-sass
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=new-sass
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-sass
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=new-sass
```
仓库：[extension-js/examples/new-sass](https://github.com/extension-js/examples/tree/main/examples/new-sass)
## 在现有扩展中使用
按下面的步骤把 Sass 添加到现有扩展。
### 安装
安装所需依赖：
### 在 HTML 文件中的用法
在扩展页面（popup/options/新标签页）中，通过入口脚本引入 Sass：
```html theme={null}
New Extension
Hello, Extension.
```
```ts theme={null}
import "./styles/globals.scss";
console.log("Sass loaded");
```
## Sass 模块
像 CSS 模块一样，用 Sass 模块给样式建立本地作用域。使用 `.module.scss` 或 `.module.sass` 启用作用域，避免样式表中的命名冲突。
### `content-sass-modules`
当注入 UI 需要作用域样式时，在 content script 中使用 Sass 模块。
```bash npm theme={null}
npx extension@latest create my-extension --template=content-sass-modules
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=content-sass-modules
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=content-sass-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-sass-modules
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=content-sass-modules
```
仓库：[extension-js/examples/content-sass-modules](https://github.com/extension-js/examples/tree/main/examples/content-sass-modules)
## 在现有扩展中使用 Sass 模块
要启用 Sass 模块，把 Sass 文件重命名为 `.module.scss` 或 `.module.sass`。这会自动把样式作用域限定到你的组件。
```diff theme={null}
- button.scss
+ button.module.scss
```
### 用法示例
重命名 Sass 文件后，把它导入到脚本里：
```ts theme={null}
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 文件内容：
```scss theme={null}
/* styles/button.module.scss */
$primary-color: #64ff00;
:export {
primaryColor: $primary-color;
}
```
## React/Preact 用法示例
把 Sass 模块导入 React 或 Preact 组件，并使用其中带作用域的类名：
```jsx theme={null}
import styles from "./styles/button.module.scss";
export default function MyComponent() {
return Hello, Extension!
;
}
```
## Vue 用法示例
在 Vue 单文件组件里，优先使用带 `lang="scss"` 的模块样式：
```vue theme={null}
Hello, Extension!
```
## Svelte 用法示例
在 Svelte 中，导入 Sass 模块映射并应用类名：
```svelte theme={null}
Hello, Extension!
```
## 行为说明
* 在扩展页面里，`.module.scss` 和 `.module.sass` 会为 JS/TS 的导入导出类名映射。
* 在 content script 中，Extension.js 会把 Sass 作为 CSS 资源输出，不附带 JavaScript 的类名映射。
* 如果项目缺少 Sass 工具链，Extension.js 会安装可选依赖并提示你重启。
## 下一步
* 进一步了解 [CSS 模块](/docs/languages-and-frameworks/css-modules)。
* 用 [Stylelint](/docs/integrations/stylelint) 保证样式表质量。
## 视频讲解