Less

インストール

@rsbuild/plugin-less プラグインをインストールする必要があります:

pnpm
npm
yarn
bun
pnpm add -D @rsbuild/plugin-less less

設定

addfox.config.ts にプラグインを追加:

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

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

使用

インストールと設定後、直接 .less ファイルを作成してインポートできます:

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

.btn {
  background: @brand;
  color: #fff;
}
import "./index.less";

説明

  • content シナリオでは、名前空間クラス名を使用してページスタイルの汚染を避けることをお勧めします
  • プラグインは Less ファイルのコンパイルとインポートを自動的に処理します