next-with-less

> Next.js + Less CSS 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

$3

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

``sh
yarn add @alessiocancian/next-with-less

npm i @alessiocancian/next-with-less
`

Peer dependencies to install: less less-loader.

Usage

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

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

You can see all the options available to less-loader here.

$3

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

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

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

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

$3

To override some of antd default variables, just add them under lessLoaderOptions.lessOptions.modifyVars:

`js
// next.config.js
const withLess = require("@alessiocancian/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("@alessiocancian/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 trying to add built in Less support for Next, but currently it's not likely to be merged.