Less with antd and nextjs

How to inegrate nextjs and antd refine project with less as css preprocessor

6 Replies

kapa.ai•16mo 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•16mo 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•16mo ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

extended-yellow•16mo 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.

exotic-emerald•16mo 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

extended-yellow•16mo 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

Customize Theme - Ant Design