https://github.com/iam-medvedev/esbuild-plugin-less
esbuild plugin for less files
https://github.com/iam-medvedev/esbuild-plugin-less
esbuild less plugin
Last synced: 12 days ago
JSON representation
esbuild plugin for less files
- Host: GitHub
- URL: https://github.com/iam-medvedev/esbuild-plugin-less
- Owner: iam-medvedev
- License: wtfpl
- Created: 2021-01-20T06:44:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-31T09:40:40.000Z (16 days ago)
- Last Synced: 2025-04-03T15:02:42.806Z (13 days ago)
- Topics: esbuild, less, plugin
- Language: TypeScript
- Homepage: https://npmjs.com/package/esbuild-plugin-less
- Size: 9.07 MB
- Stars: 43
- Watchers: 3
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-esbuild - esbuild-plugin-less
README
# `esbuild-plugin-less`
[](http://www.wtfpl.net/about/)
[](http://www.typescriptlang.org/)
[](https://github.com/prettier/prettier)
[](https://www.npmjs.com/package/esbuild-plugin-less)
[](https://www.npmjs.com/package/esbuild-plugin-less)
[](https://libraries.io/github/iam-medvedev/esbuild-plugin-less)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fiam-medvedev%2Fesbuild-plugin-less?ref=badge_shield)
[](https://github.com/semantic-release/semantic-release)
[esbuild](https://github.com/evanw/esbuild) plugin for [LESS](https://lesscss.org/) files.
Supports all LESS features, including [imports](https://lesscss.org/#importing), [variables](https://lesscss.org/#variables), [mixins](https://lesscss.org/#mixins), and more.
## Features
- 💫 Support for all LESS.js features and options
- 🎨 CSS Modules support with `.module.less` files
- 🔄 Watch mode support with automatic rebuilds
- 🎯 Custom file filtering options
- 📝 Written in TypeScript
## Installation
```sh
# Using bun
$ bun add -D esbuild-plugin-less
# Using yarn
$ yarn add -D esbuild-plugin-less
# Using pnpm
$ pnpm add -D esbuild-plugin-less
# Using npm
$ npm install --save-dev esbuild-plugin-less
```
## Basic Usage
```ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';
build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [lessLoader()], // That's it!
loader: {
'.ts': 'ts',
},
});
```
## Advanced Configuration
### With LESS Options
```ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';
build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [
lessLoader({
// LESS.js options
math: 'always',
globalVars: {
primaryColor: '#ff0000',
},
paths: ['./src/styles'],
javascriptEnabled: true,
}),
],
});
```
### With Loader Options
```ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';
build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [
lessLoader(
{}, // LESS options (empty in this example)
{
// Loader options
filter: /\._?less$/, // Custom file filter
inline: false, // Control if LESS files should be inlined as strings
},
),
],
});
```
## CSS Modules Support
The plugin automatically handles `.module.less` files as CSS Modules. This enables local scoping of styles and generates unique class names.
```less
// styles.module.less
.button {
color: blue;
}
```
```ts
// Component.ts
import styles from './styles.module.less';
element.className = styles.button; // Will use the generated unique class name
```
## Configuration Options
### LESS Options
The plugin accepts all valid options from LESS.js. Here are some commonly used options:
For a complete list of LESS options, see the [LESS documentation](http://lesscss.org/usage/#less-options).
### Loader Options
| Option | Type | Default | Description |
| -------- | --------- | ----------- | ------------------------------------------ |
| `filter` | `RegExp` | `/\.less$/` | Custom filter for processing files |
| `inline` | `boolean` | `false` | Import LESS files as strings in TypeScript |
## License
`esbuild-plugin-less` is [WTFPL licensed](./LICENSE).
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fiam-medvedev%2Fesbuild-plugin-less?ref=badge_large)