> ## 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 and SCSS modules in browser extensions
> Scale browser extension styling with Sass variables, nesting, and SCSS modules. Extension.js supports .scss, .sass, and .module variants via Rspack.
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.
```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 deno theme={null}
deno run -A npm:extension@latest create my-extension --template=new-sass
```
Repository: [extension-js/examples/new-sass](https://github.com/extension-js/examples/tree/main/examples/new-sass)
## Usage with an existing extension
Add Sass to an existing extension with the steps below.
### Installation
Install the required dependencies:
### Example usage in an HTML file
In extension pages (popup/options/new tab), import Sass from your entry script:
```html theme={null}
New Extension
Hello, Extension.
```
```ts theme={null}
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.
```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 deno theme={null}
deno run -A npm:extension@latest create my-extension --template=content-sass-modules
```
Repository: [extension-js/examples/content-sass-modules](https://github.com/extension-js/examples/tree/main/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.
```diff theme={null}
- button.scss
+ button.module.scss
```
### Example usage
After renaming your Sass file, import it into your script:
```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);
```
In the Sass file:
```scss theme={null}
/* 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:
```jsx theme={null}
import styles from "./styles/button.module.scss";
export default function MyComponent() {
return Hello, Extension!
;
}
```
## Vue example usage
In Vue SFCs, prefer module styles with `lang="scss"`:
```vue theme={null}
Hello, Extension!
```
## Svelte example usage
In Svelte, import Sass module mappings and apply classes:
```svelte theme={null}
Hello, Extension!
```
## 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](/docs/languages-and-frameworks/css-modules).
* Ensure stylesheet quality with [Stylelint](/docs/integrations/stylelint).
## Video walkthrough