I'm in the process of customizing the antd theme in conjunction with next.js.
After researching online, I came across a helpful example and implemented the setup like so:
// package.json
"dependencies": {
"@ant-design/icons": "^4.8.0",
"antd": "^4.24.3",
"next": "^12.3.1",
"next-plugin-antd-less": "^1.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.6",
"styled-reset": "^4.4.2"
},
"devDependencies": {
"babel-plugin-import": "^1.13.5"
}
// .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
// next.config.js
const withAntdLess = require('next-plugin-antd-less');
module.exports = withAntdLess({
modifyVars: { '@primary-color': '#04f' },
lessVarsFilePath: './styles/variables.less',
lessVarsFilePathAppendToEndOfContent: false,
cssLoaderOptions: {},
webpack(config) {
return config;
},
});
// styles/variables.less
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';
@primary-color: #52c41a;
// pages/app.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import "../styles/variables.less";
import GlobalStyles from '../styles/GlobalStyles';
import Theme from '../styles/Theme';
const Home = ({ Component, pageProps }) => {
return (
<>
<GlobalStyles />
<ThemeProvider theme={Theme}>
<Component {...pageProps} />
</ThemeProvider>
</>
);
};
export default Home;
// log of executing npm run dev command
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The root value has an unexpected property, modifyVars, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, [...]
Despite implementing the setup, upon running the code, the changes didn't reflect as expected.
Revisiting the reference material, I attempted the settings again with no success.
Could there be an issue with my configurations?
Your insights and comments in response would be greatly appreciated.