在浏览器扩展中使用 Sass 与 SCSS 模块

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

什么场景适合用 Sass

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

模板示例

`new-sass`

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

npx extension@latest create my-extension --template=new-sass

pnpx extension@latest create my-extension --template=new-sass

yarn dlx extension@latest create my-extension --template=new-sass

bunx extension@latest create my-extension --template=new-sass

bunx 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`

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

npx extension@latest create my-extension --template=content-sass-modules

pnpx extension@latest create my-extension --template=content-sass-modules

yarn dlx extension@latest create my-extension --template=content-sass-modules

bunx extension@latest create my-extension --template=content-sass-modules

bunx 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 会安装可选依赖并提示你重启。

下一步

进一步了解 CSS 模块。
用 Stylelint 保证样式表质量。

视频讲解

在浏览器扩展中使用 Less CSS 在浏览器扩展中使用 Node API

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

在浏览器扩展中使用 Sass 与 SCSS 模块

什么场景适合用 Sass

模板示例

`new-sass`

在现有扩展中使用

安装

在 HTML 文件中的用法

Sass 模块

`content-sass-modules`

在现有扩展中使用 Sass 模块

用法示例

React/Preact 用法示例

Vue 用法示例

Svelte 用法示例

行为说明

下一步

视频讲解

​什么场景适合用 Sass

​模板示例

​new-sass

​在现有扩展中使用

​安装

​在 HTML 文件中的用法

​Sass 模块

​content-sass-modules

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

​用法示例

​React/Preact 用法示例

​Vue 用法示例

​Svelte 用法示例

​行为说明

​下一步

​视频讲解

什么场景适合用 Sass

模板示例

`new-sass`

在现有扩展中使用

安装

在 HTML 文件中的用法

Sass 模块

`content-sass-modules`

在现有扩展中使用 Sass 模块

用法示例

React/Preact 用法示例

Vue 用法示例

Svelte 用法示例

行为说明

下一步

视频讲解