#Less

#설치

@rsbuild/plugin-less 플러그인을 설치해야 합니다:

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

#구성

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 파일의 컴파일 및 가져오기를 자동으로 처리합니다