Less loader for next.js and Antd integration.
1. first step, install loader package
// using yarn
yarn add next-antd-aza-less --save
// or use npm
npm install next-antd-aza-less --save
2. second step, add .babelrc in your project
{
"presets": [
"next/babel"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory":"lib",
"style": true
}
]
]
}
3. change your .next.config.js
Example:
const antdLessLoader = require("next-antd-aza-less")
const modifyVars = require("./your/custom/vars")
if (typeof require !== 'undefined') {
require.extensions['.less'] = (file) => {}
}
/* Without CSS Modules, with PostCSS */
module.exports = antdLessLoader({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: modifyVars
}
})