ai-leonid/next-with-less

# `next-with-less`

> [Next.js](https://nextjs.org/) + [Less CSS](https://lesscss.org/) Support

Next.js supports SASS/SCSS, but not Less. This plugin adds Less support by duplicating SASS webpack rules and adding support for `.less` files with `less-loader`.
It mimics the exact behavior of CSS extraction/css-modules/errors/client/server of SASS.

⚠️ _**Use with caution - Next.js implementation can change in any version, and the monkey patching may not work anymore.**_

## Install

### Compatiblilty:

* Next 11, 12 -> v2.x
* Next 13.3+ -> v3.x

```sh
yarn add next-with-less

npm i next-with-less
```

Peer dependencies to install: `less` `less-loader`.

## Usage

```js
// next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
  lessLoaderOptions: {
    /* ... */
  },
});
```

You can see all the options available to `less-loader` [here](https://webpack.js.org/loaders/less-loader/#options).

### Usage with [`next-compose-plugins`](https://github.com/cyrilwanner/next-compose-plugins)

```js
// next.config.js
const withPlugins = require("next-compose-plugins");

const withLess = require("next-with-less");

const plugins = [
  /* ...other plugins... */
  [withLess, {
    lessLoaderOptions: {
      /* ... */
    },
  }],
  /* ...other plugins... */
];

module.exports = withPlugins(plugins, {
  /* ... */
});
```

### Customize `antd` theme

To override some of `antd` [default variables](https://ant.design/docs/react/customize-theme), just add them under `lessLoaderOptions.lessOptions.modifyVars`:

```js
// next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
  lessLoaderOptions: {
    /* ... */
    lessOptions: {
      /* ... */
      modifyVars: {
        "primary-color": "#9900FF",
        "border-radius-base": "2px",
        /* ... */
      },
    },
  },
});
```

As an alternative, the same can be achieved using the `additionalData` option.
Put your variables in a file, like:

```less
@primary-color: #9900ff;
@border-radius-base: 2px;
```

and then pass it to `less-loader` using `additionalData`:

```js
// next.config.js
const withLess = require("next-with-less");
const path = require("path");

const pathToLessFileWithVariables = path.resolve(
  "your-file-with-antd-variables.less"
);

module.exports = withLess({
  lessLoaderOptions: {
    /* ... */
    additionalData: (content) =>
      `${content}\n\n@import '${pathToLessFileWithVariables}';`,
  },
});
```

---

*There's an [existing PR](https://github.com/vercel/next.js/pull/23185) trying to add built in Less support for Next, but currently it's not likely to be merged.*
ai-leonid / next-with-less

About

Languages
