Less with antd and nextjs

How to inegrate nextjs and antd refine project with less as css preprocessor
6 Replies
kapa.ai
kapa.ai14mo ago
Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- To integrate Next.js and Ant Design with refine using Less as a CSS preprocessor, follow these steps: 1. Create a new refine project with Next.js and Ant Design:
npm create refine-app@latest -- --example with-nextjs
npm create refine-app@latest -- --example with-nextjs
2. Install the necessary packages for Less:
npm install -s gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import
npm install -s gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import
3. Configure your project to use Less as a CSS preprocessor. You can follow the example provided in this blog post (https://refine.dev/blog/how-to-add-darkmode-in-ant-design/) on implementing dark mode in Ant Design using gulp. The initial setup section of the blog post shows how to set up a basic Refine app with Ant Design and install the necessary packages for Less. Keep in mind that the blog post was created using version 3.x.x of refine, but version 4.x.x is backward compatible with version 3.x.x. You can check the migration guide (https://refine.dev/docs/migration-guide/) for differences between the two versions. For more information on integrating refine with Next.js, refer to the refine Next.js documentation (https://refine.dev/docs/packages/documentation/routers/nextjs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Implementing Dark Mode In Ant Design Using gulp | refine
In this article, we’ll learn how to efficiently implement dark mode in a refine/Ant Design app, using gulp library and leveraging some React features like hooks
kapa.ai
kapa.ai14mo ago
<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below
yelping-magenta
yelping-magenta14mo ago
Hey @yaztoosleepy Ant Design has switched to css-in-js with the latest version. Our recommendation is to use the latest version. refine4 comes with antd5.
metropolitan-bronze
metropolitan-bronze14mo ago
Hi is this the preffered way for example for other styles such as
display: flex
display: flex
? There is inline styles and styles passed as props in components in my refine generated code I want to manage it in a better way
yelping-magenta
yelping-magenta14mo ago
You can do it the way Antd suggests. refine doesn't care about css. You should read here. https://ant.design/docs/react/customize-theme