search

SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

SWC replacing Babel #98

Closed johnmagbag1995 closed 2 years ago

johnmagbag1995 commented 2 years ago

Next.js is going to replace Babel with SWC.

How to still use this library without babel-plugin-import?

https://nextjs.org/docs/upgrading#swc-replacing-babel

SolidZORO commented 2 years ago

I don't know SWC, and my advice is to wait for the SWC ecosystem to mature.

I don't have time to support it myself, if someone PR I'm happy to merge.

kriscarle commented 2 years ago

Adding a note here for anyone else looking to switch to SWC. If you are okay loading the entire antd css file, there is no need to use this extension or babel-plugin-import you can just follow the instructions here and import the CSS https://ant.design/docs/react/getting-started You'll still get tree shaking on the JS if you are doing ES imports like import { Button } from 'antd'

I also apply my own custom theme using https://ant.design/docs/react/customize-theme#Customize-in-less-file and then running lessc --js my-antd.less my-antd.css

dzcpy commented 2 years ago

Adding a note here for anyone else looking to switch to SWC. If you are okay loading the entire antd css file, there is no need to use this extension or babel-plugin-import you can just follow the instructions here and import the CSS https://ant.design/docs/react/getting-started You'll still get tree shaking on the JS if you are doing ES imports like import { Button } from 'antd'

I also apply my own custom theme using https://ant.design/docs/react/customize-theme#Customize-in-less-file and then running lessc --js my-antd.less my-antd.css

How about using this feature? https://nextjs.org/docs/advanced-features/compiler#modularize-imports It seems that we can ditch babel-plugin-import in favor of Next's modularize imports

devuxer commented 1 year ago

lessc --js my-antd.less my-antd.css

@kriscarle, Thanks for sharing this. It works great, and didn't even increase my page bundle sizes. Seems like the one thing you sacrifice, though, is hot reloading for style changes (unless you have a solution for that?).

kriscarle commented 1 year ago

@devuxer Something like this may help? https://www.npmjs.com/package/less-watch-compiler

mayrsascha commented 1 year ago

@SolidZORO Please consider re-opening this issue. SWC is standard for a Next.js app these days, I don't want want to go back to Babel just because of this plugin and there are no other plugins supporting Less with Next 13.