Less with antd and nextjs
How to inegrate nextjs and antd refine project with less as css preprocessor
6 Replies
Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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:
2. Install the necessary packages for Less:
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
<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below
ambitious-aqua•2y 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.ambitious-aqua•2y ago
Hi is this the preffered way for example for other styles such as ?
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
ambitious-aqua•2y 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