Less CSS in browser extensions

Use Less CSS across browser extension pages and UI components with a single pipeline that also supports module-scoped styles. Extension.js detects Less usage, configures the preprocessors in the Rspack build, and supports both .less and .module.less files in browser extensions.

When Less is a good fit

You are migrating an existing Less-based web codebase.
You want variables and nesting with low migration cost.
You need module-scoped styles while keeping Less conventions.

Template examples

`new-less`

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

npx extension@latest create my-extension --template=newtab-less

pnpx extension@latest create my-extension --template=newtab-less

yarn dlx extension@latest create my-extension --template=newtab-less

bunx extension@latest create my-extension --template=newtab-less

deno run -A npm:extension@latest create my-extension --template=newtab-less

Repository: extension-js/examples/newtab-less

Usage with an existing extension

Add Less to an existing extension with the steps below.

Installation

Install the required dependencies:

npm install -D less less-loader

pnpm add -D less less-loader

yarn add -D less less-loader

bun add -d less less-loader

deno add -D npm:less npm:less-loader

Example usage in an HTML file

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

<!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.less";

console.log("Less loaded");

In a `content_script` file

import "./styles/content.less";

console.log("Content styles loaded");

Less modules in browser extensions

Scope class names locally with Less modules, just like CSS Modules. This prevents global style conflicts by default, which matters in extensions because content scripts run inside a host page’s CSS scope.

`content-less-modules`

Use Less modules in content scripts when you need scoped styles on injected UI.

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

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

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

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

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

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

Using Less modules in an existing extension

To enable Less modules, rename your .less files to include .module.less. This enables automatic local scoping of class names.

- myStyles.less
+ myStyles.module.less

Example usage

After renaming your Less file, you can import it into your scripts:

import styles from "./styles/myStyles.module.less";

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

React/Preact example usage

To use Less modules in React or Preact, import your Less module and apply styles as you would in any component:

import styles from "./styles/myStyles.module.less";

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

Vue example usage

In Vue, prefer single-file component (SFC) styles with lang="less" and module:

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

<style lang="less" module>
@import "./styles/myStyles.module.less";
</style>

Svelte example usage

In Svelte, import Less module mappings and apply classes:

<script>
  import styles from "./styles/myStyles.module.less";
</script>

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

Behavior notes

In extension page contexts, .module.less exports class maps as expected.
In content scripts, Extension.js emits styles as CSS assets and injects them as stylesheets into the page.
If the less package is not installed, Extension.js warns and copies the raw Less source into the output CSS, so those surfaces render unstyled until you install it yourself.

About the `less` post-install warning

With some package managers, installing a project that uses Less can surface a notice that build scripts for less were not run (pnpm prints Ignored build scripts: less and asks you to approve them). This is expected and safe to ignore. Extension.js compiles Less through its own bundler pipeline, so it does not rely on Less’s optional post-install step (which only sets up Playwright inside Less’s own repository and is a no-op for consumers). Your .less and .module.less files build and hot-reload the same either way. Scaffolded projects do not ship a pnpm.ignoredBuiltDependencies key, so a pnpm install of a Less template shows the notice like any other project. npm and yarn run the script by default and print nothing. If you hit the notice, you have two equivalent ways to silence it:

Skip it (recommended): add pnpm.ignoredBuiltDependencies: ["less"] to your package.json. This acknowledges the script without running the no-op.
Run it: run pnpm approve-builds and select less, or add pnpm.onlyBuiltDependencies: ["less"]. Harmless, just unnecessary.

Either way there is no functional difference for typical Extension.js projects.

Next steps

Learn more about CSS Modules.
Configure PostCSS in your extension.

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

Less CSS in browser extensions

When Less is a good fit

Template examples

`new-less`

Usage with an existing extension

Installation

Example usage in an HTML file

In a `content_script` file

Less modules in browser extensions

`content-less-modules`

Using Less modules in an existing extension

Example usage

React/Preact example usage

Vue example usage

Svelte example usage

Behavior notes

About the `less` post-install warning

Next steps

Video walkthrough

​When Less is a good fit

​Template examples

​new-less

​Usage with an existing extension

​Installation

​Example usage in an HTML file

​In a content_script file

​Less modules in browser extensions

​content-less-modules

​Using Less modules in an existing extension

​Example usage

​React/Preact example usage

​Vue example usage

​Svelte example usage

​Behavior notes

​About the less post-install warning

​Next steps

​Video walkthrough

When Less is a good fit

Template examples

`new-less`

Usage with an existing extension

Installation

Example usage in an HTML file

In a `content_script` file

Less modules in browser extensions

`content-less-modules`

Using Less modules in an existing extension

Example usage

React/Preact example usage

Vue example usage

Svelte example usage

Behavior notes

About the `less` post-install warning

Next steps

Video walkthrough