@alessiocancian/next-with-less
v3.0.4
Published
Next.js + Less CSS Support
Downloads
116
Readme
next-with-less
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
yarn add @alessiocancian/next-with-less
npm i @alessiocancian/next-with-less
Peer dependencies to install: less
less-loader
.
Usage
// 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.
Usage with next-compose-plugins
// 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, {
/* ... */
});
Customize antd
theme
To override some of antd
default variables, just add them under lessLoaderOptions.lessOptions.modifyVars
:
// 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:
@primary-color: #9900ff;
@border-radius-base: 2px;
and then pass it to less-loader
using additionalData
:
// 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.