# gatsby-plugin-less

> Gatsby plugin to add support for using Less

Latest version **7.16.0** (published 2026-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-less
pnpm add gatsby-plugin-less
yarn add gatsby-plugin-less
bun add gatsby-plugin-less
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 7.16.0 |
| Published | 2026-01-26 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18.0.0 <26 |
| Dependencies | 2 |
| Unpacked size | 41.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55939 |
| Author | monastic.panic@gmail.com |
| Maintainers | pieh, kathmbeck, serhalp-netlify, mlgualtieri-gatsby |
| Keywords | gatsby, gatsby-plugin, less |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-less
- Repository: https://github.com/gatsbyjs/gatsby
- Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-less#readme
- Issues: https://github.com/gatsbyjs/gatsby/issues
- npm.io page: https://npm.io/package/gatsby-plugin-less

## Dependencies (2)

- [less-loader](https://npm.io/package/less-loader.md) ^6.2.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13

## Recent versions

- 7.16.0 (latest) — 2026-01-26
- 7.17.0-next.0 (next) — 2025-11-27
- 7.17.0-react19.1 (react19) — 2025-11-26
- 5.15.0 (latest-v3) — 2022-12-07
- 6.25.0 (latest-v4) — 2022-12-07
- 7.0.0-alpha-drupal-proxyurl.14 (drupal-proxyurl) — 2022-11-22
- 6.14.0-alpha-transformer-json.26 (alpha-transformer-json) — 2022-10-12
- 7.0.0-alpha-v5.d20221012t101120.57 (alpha-v5) — 2022-10-12
- 6.23.0-alpha-a5-peer.70 (alpha-a5-peer) — 2022-09-14
- 6.23.0-alpha-preview-gh-api.26 (preview-gh-api) — 2022-09-08
- 6.23.0-alpha-9689ff.25 (alpha-9689ff) — 2022-08-31
- 6.18.0-alpha-drupal-self-reference.18 (drupal-self-reference) — 2022-07-19
- 6.15.0-alpha-wp-image-cdn-auth.48 (wp-image-cdn-auth) — 2022-05-20
- 6.8.0-alpha-image-service.24 (image-service) — 2022-02-10
- 6.6.0-alpha-ts-jit.60 (alpha-ts-jit) — 2022-01-21
- … 386 more at https://npm.io/package/gatsby-plugin-less/versions

## README

# gatsby-plugin-less

Provides drop-in support for Less stylesheets

## Install

`npm install gatsby-plugin-less`

## How to use

1.  Include the plugin in your `gatsby-config.js` file.
2.  Write your stylesheets in Less and require or import them as normal.

```javascript
// in gatsby-config.js
plugins: [`gatsby-plugin-less`]
```

If you need to pass options to the Less loader use the `loaderOptions` and to Less use `lessOptions` object;
see [`less-loader`](https://github.com/webpack-contrib/less-loader) for all available options.

```javascript
// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      loaderOptions: {
        appendData: `@env: ${process.env.NODE_ENV};`,
      },
      lessOptions: {
        strictMath: true,
        plugins: [new CleanCSSPlugin({ advanced: true })],
      },
    },
  },
]
```

If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader)
**Note:** Gatsby is using `css-loader@^5.0.0`.

```javascript
// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]
```

### With CSS Modules

Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.less` -> `app.module.less`.
Any file with the `module` extension will use CSS modules. CSS modules are imported as ES Modules to support treeshaking. You'll need to import styles as: `import { yourClassName, anotherClassName } from './app.module.less'`.

### PostCSS plugins

PostCSS is also included to handle some default optimizations like autoprefixing
and common cross-browser flexbox bugs. Normally you don't need to think about it, but if
you'd prefer to add additional postprocessing to your Less output you can specify plugins
in the plugin options

```javascript
// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      postCssPlugins: [somePostCssPlugin()],
    },
  },
]
```

## Breaking changes history

<!-- Please keep the breaking changes list ordered with the newest change at the top -->

### v4.0.0

- `less-loader` options now possible with the object `loaderOptions`.
- `less` options moved to the object `lessOptions` because of api change on `less-loader` v6.

### v2.0.0

- `less` is moved to a peer dependency. Installing the package
  alongside `gatsby-plugin-less` is now required. Use `npm install less`

- support Gatsby v2 only

- `theme` option has been removed. You can pass configuration object to less-loader:

```diff
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
-      theme: {
-        "text-color": `#fff`,
-      }
+      modifyVars: {
+        "text-color": `#fff`,
+      }
    },
  },
]
```

```diff
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
-      theme: `./src/theme.js`,
+      modifyVars: require(`./src/theme.js`),
    },
  },
]
```

---
_Source: https://npm.io/package/gatsby-plugin-less · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._