Skip to main content
Use Less across extension pages and UI components with a single pipeline that also supports module-scoped styles. Extension.js detects Less usage, wires the preprocessors in the Rspack build, and supports both .less and .module.less.

​
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

new-less template screenshot Start a new-tab extension with Less support already configured. 
npx extension@latest create my-extension --template=new-less
Repository: extension-js/examples/new-less

​
Usage with an existing extension

You can add Less support to an existing Extension.js project. Install the dependencies and start using Less in your extension.

​
Installation

Install the required dependencies:

​
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

Scope class names locally with Less Modules, just like CSS Modules. This prevents global style conflicts by default.

​
content-less-modules

content-less-modules template screenshot Use Less Modules in content scripts when you need scoped styles on injected UI. 
npx 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 React 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 through the content-script style flow.
  • If Less tooling is missing, Extension.js can install optional dependencies and ask for a restart.

​
Next steps

​
Video walkthrough