跳转到主要内容
用 Sass 的变量、嵌套和 SCSS 模块扩展浏览器扩展样式，同时保留单一的构建工作流。 Extension.js 通过基于 Rspack 的样式管线支持 .scss 和 .sass，以及 SCSS 模块变体（.module.scss、.module.sass）。

​
什么场景适合用 Sass

  • 你的设计系统已经依赖 Sass 变量和 mixin。
  • 你需要为组件化的扩展 UI 编写模块化样式。
  • 你希望与 web 应用里既有的 Sass 工作流保持一致。

​
模板示例

​
new-sass

new-sass template screenshot 启动一个已配置好 Sass 支持的新标签页扩展。 
npx extension@latest create my-extension --template=new-sass
仓库：extension-js/examples/new-sass

​
在现有扩展中使用

按下面的步骤把 Sass 添加到现有扩展。

​
安装

安装所需依赖：

​
在 HTML 文件中的用法

在扩展页面（popup/options/新标签页）中，通过入口脚本引入 Sass： 
<!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.scss";

console.log("Sass loaded");

​
Sass 模块

像 CSS 模块一样，用 Sass 模块给样式建立本地作用域。使用 .module.scss 或 .module.sass 启用作用域，避免样式表中的命名冲突。

​
content-sass-modules

content-sass-modules template screenshot 当注入 UI 需要作用域样式时，在 content script 中使用 Sass 模块。 
npx extension@latest create my-extension --template=content-sass-modules
仓库：extension-js/examples/content-sass-modules

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

要启用 Sass 模块，把 Sass 文件重命名为 .module.scss 或 .module.sass。这会自动把样式作用域限定到你的组件。 
- button.scss
+ button.module.scss

​
用法示例

重命名 Sass 文件后，把它导入到脚本里： 
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 文件内容： 
/* styles/button.module.scss */

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

​
React/Preact 用法示例

把 Sass 模块导入 React 或 Preact 组件，并使用其中带作用域的类名： 
import styles from "./styles/button.module.scss";

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

​
Vue 用法示例

在 Vue 单文件组件里，优先使用带 lang="scss" 的模块样式： 
<template>
  <h1 :class="$style.primaryColor">Hello, Extension!</h1>
</template>

<style lang="scss" module>
@import "./styles/button.module.scss";
</style>

​
Svelte 用法示例

在 Svelte 中，导入 Sass 模块映射并应用类名： 
<script>
  import styles from "./styles/button.module.scss";
</script>

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

​
行为说明

  • 在扩展页面里，.module.scss 和 .module.sass 会为 JS/TS 的导入导出类名映射。
  • 在 content script 中，Extension.js 会把 Sass 作为 CSS 资源输出，不附带 JavaScript 的类名映射。
  • 如果项目缺少 Sass 工具链，Extension.js 会安装可选依赖并提示你重启。

​
下一步

​
视频讲解