Sass and SCSS modules in browser extensions

Use Sass to scale browser extension styling with variables, nesting, and SCSS modules while keeping a single build workflow. Extension.js supports .scss and .sass, plus SCSS module variants (.module.scss, .module.sass) through the Rspack-based style pipeline.

When Sass is a good fit

Your design system already relies on Sass variables and mixins.
You need modular styles for component-driven extension UIs.
You want parity with existing Sass workflows in web applications.

Template examples

`new-sass`

Start a new-tab extension with Sass support already configured.

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

deno run -A npm:extension@latest create my-extension --template=new-sass

Repository: extension-js/examples/new-sass

Usage with an existing extension

Add Sass to an existing extension with the steps below.

Installation

Install the required dependencies:

npm install -D sass sass-loader

pnpm add -D sass sass-loader

yarn add -D sass sass-loader

bun add -d sass sass-loader

deno add -D npm:sass npm:sass-loader

Example usage in an HTML file

In extension pages (popup/options/new tab), import Sass from your entry script:

<!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 modules

Scope styles locally with Sass modules, just like CSS modules. Use .module.scss or .module.sass to activate scoping and prevent naming conflicts in your stylesheets.

`content-sass-modules`

Use Sass modules in content scripts when you need scoped styling for injected UI.

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

deno run -A npm:extension@latest create my-extension --template=content-sass-modules

Repository: extension-js/examples/content-sass-modules

Using Sass modules in an existing extension

To enable Sass modules, rename your Sass file to include .module.scss or .module.sass. This automatically scopes the styles to your component.

- button.scss
+ button.module.scss

Example usage

After renaming your Sass file, import it into your script:

import styles from "./styles/button.module.scss";

const element = document.createElement("h1");
element.className = styles.primaryColor;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);

In the Sass file:

/* styles/button.module.scss */

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

React/Preact example usage

Import the Sass module into your React or Preact component, and use the scoped class names:

import styles from "./styles/button.module.scss";

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

Vue example usage

In Vue SFCs, prefer module styles with lang="scss":

<template>
  <h1 :class="$style.primaryColor">Hello, Extension!</h1>
</template>

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

Svelte example usage

In Svelte, import Sass module mappings and apply classes:

<script>
  import styles from "./styles/button.module.scss";
</script>

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

Behavior notes

In extension pages, .module.scss and .module.sass export class maps for JS/TS imports.
In content scripts, Extension.js emits Sass as CSS assets without JavaScript class-name mappings.
If your project lacks Sass tooling, Extension.js installs the optional dependencies and asks for a restart.

Next steps

Learn more about CSS modules.
Ensure stylesheet quality with Stylelint.

Video walkthrough

Less CSS in browser extensions Node APIs in browser extensions

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Publish to the stores

Debugging

Implementation guide

Community

Sass and SCSS modules in browser extensions

When Sass is a good fit

Template examples

`new-sass`

Usage with an existing extension

Installation

Example usage in an HTML file

Sass modules

`content-sass-modules`

Using Sass modules in an existing extension

Example usage

React/Preact example usage

Vue example usage

Svelte example usage

Behavior notes

Next steps

Video walkthrough

​When Sass is a good fit

​Template examples

​new-sass

​Usage with an existing extension

​Installation

​Example usage in an HTML file

​Sass modules

​content-sass-modules

​Using Sass modules in an existing extension

​Example usage

​React/Preact example usage

​Vue example usage

​Svelte example usage

​Behavior notes

​Next steps

​Video walkthrough

When Sass is a good fit

Template examples

`new-sass`

Usage with an existing extension

Installation

Example usage in an HTML file

Sass modules

`content-sass-modules`

Using Sass modules in an existing extension

Example usage

React/Preact example usage

Vue example usage

Svelte example usage

Behavior notes

Next steps

Video walkthrough