https://github.com/elado/next-with-less
Next.js + Less CSS Support
https://github.com/elado/next-with-less
Last synced: about 1 month ago
JSON representation
Next.js + Less CSS Support
- Host: GitHub
- URL: https://github.com/elado/next-with-less
- Owner: elado
- License: mit
- Created: 2021-04-20T17:15:18.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T09:19:51.000Z (about 1 year ago)
- Last Synced: 2025-03-28T22:13:22.036Z (about 2 months ago)
- Language: JavaScript
- Size: 513 KB
- Stars: 140
- Watchers: 4
- Forks: 24
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `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.*