#Less

#Install

You need to install the @rsbuild/plugin-less plugin:

pnpm

npm

yarn

bun

pnpm add -D @rsbuild/plugin-less less

npm install -D @rsbuild/plugin-less less

yarn add -D @rsbuild/plugin-less less

bun add -D @rsbuild/plugin-less less

#Configuration

Add the plugin in addfox.config.ts:

import { defineConfig } from "addfox";
import { pluginLess } from "@rsbuild/plugin-less";

export default defineConfig({
  plugins: [pluginLess()],
});

#Usage

After installing and configuring, you can create and import .less files directly:

/* app/popup/index.less */
@brand: #2563eb;

.btn {
  background: @brand;
  color: #fff;
}

import "./index.less";

#Notes

• For content scripts, prefer prefixed class names to avoid style leakage to host pages
• The plugin automatically handles Less file compilation and imports