---
title: "@farmfe/js-plugin-less"
locale: "en"
version: "1.x"
canonicalUrl: "https://farmfe.org/docs/1.x/plugins/official-plugins/js-less"
publicationStatus: "prerelease"
---

<a id="farmfejs-plugin-less"></a>
# @farmfe/js-plugin-less


Support ` less ` for Farm.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/js-plugin-less less
```


**yarn**

```javascript
yarn add @farmfe/js-plugin-less less
```


**pnpm**

```javascript
pnpm add @farmfe/js-plugin-less less
```



<a id="usage"></a>
## Usage


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginLess from '@farmfe/js-plugin-less';

const config: UserConfig = {
  plugins: [
    farmJsPluginLess({ /* options */ })
  ]
}
```


<a id="options"></a>
## Options


```ts
export type LessPluginOptions = {
  lessOptions?: Less.Options;
  implementation?: string;
  filters?: {
    resolvedPaths?: string[];
    moduleTypes?: string[];
  };
  additionalData?:
    | string
    | ((context?: string, resolvePath?: string) => string | Promise<string>);
};
```


<a id="lessoptions"></a>
### lessOptions


Less options. See [less options](<https://lesscss.org/usage/#less-options>).


Example:


```ts
import path from 'node:path';
import { UserConfig } from '@farmfe/core';
import farmJsPluginLess from '@farmfe/js-plugin-less';

const config: UserConfig = {
  plugins: [
    farmJsPluginLess({
      lessOptions: {
        paths: [path.resolve(process.cwd(), 'styles')]
      }
    })
  ]
}

export default config;
```


<a id="filters"></a>
### filters


Which files should be processed by ` less `. default to ` { resolvedPaths: ['\\.less$'] } ` for load and ` { moduleTypes: ['less'] } ` for transform.


- ` resolvedPaths `: Only files under these paths will be processed. Support regex.
- ` moduleTypes `: Only files with these module types will be processed.


` resolvedPaths ` and ` moduleTypes ` are unioned, which means files match any of them will be processed.


Example:


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginLess from '@farmfe/js-plugin-less';

const config: UserConfig = {
  plugins: [
    farmJsPluginLess({
      filters: {
        // all files end with .custom-css will be processed
        resolvedPaths: ['\\.custom-less$'],
        moduleTypes: ['less']
      }
    })
  ]
}

export default config;
```


<a id="implementation"></a>
### implementation


` implementation ` package name of ` less `. Default to ` less `.


<a id="additionaldata"></a>
### additionalData


```ts
type AdditionalDataOption = string | ((content?: string, resolvePath?: string) => string | Promise<string>);
```


Additional data to be added to every less file. Example:


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginLess from '@farmfe/js-plugin-less';

const config: UserConfig = {
  plugins: [
    farmJsPluginLess({
      // add variables.less to every less file
      additionalData: `
        @import "./src/styles/variables.less";
      `
    })
  ]
}
```


For less file:


```less
.foo {
  color: @primary-color;
}
```


` additionalData ` will be added to the top of the file:


```less
@import "./src/styles/variables.less";

.foo {
  color: @primary-color;
}
```


Function form:


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginLess from '@farmfe/js-plugin-less';

const config: UserConfig = {
  plugins: [
    farmJsPluginLess({
      // add variables.less to every less file
      additionalData: (content, resolvePath) => {
        if (resolvePath === '/path/to/index.less') {
          return `
            @import "./src/styles/variables.less";
          `;
        }
      }
    })
  ]
}
```