Why is the NG-Zorro still based on LESS instead of SCSS?

[micobarac]

Why is the NG-Zorro still based on LESS instead of SCSS?

[HyperLife1119]

Because ant-design v4 uses LESS, and zorro's styles are fully synchronized from ant-design.

[imaliouris]

Is there any plan for ant-design v5? It's been out for more than a year

[ysk3a]

I am curious about this as well. I don't see any mention of syncing except for " working on figuring out a better way to do it" in
#9263 . No mention if it will be implemented this year's milestone or not either.

[micobarac]

I see that it usess LESS, but, LESS is pretty much outdated and massively replaced with SASS. Besides, being based on LESS makes and-design (ng-zorro) difficult to use in Angular applications, where SASS is essential.

[micobarac]

Try setting up color theme variables in Angular + Ng Zorro, you will run into a nightmare global CSS variables.

[ParsaArvanehPA]

Hi @micobarac,

I was wondering if you could clarify a bit more on why you feel changing the theme is quite challenging. Have you had the chance to try using nzConfigService.set() to dynamically switch themes? This approach should work regardless of whether you're using Less or Sass.

Personally, I’ve never used Less in any of my Angular projects, and I can assure you that it hasn't been an issue when working with NG-ZORRO. Simply importing the .css file should provide all the functionality you need.

Looking forward to hearing your thoughts!

[luangong]

CSS preprocessors like Sass, Less, and Stylus don’t work with Tailwind CSS v4. I had to @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less" in a separate theme.less file and @import "tailwindcss" in src/styles.css.

[ysk3a]

I just started to use this library and tested the behavior in comparison to my own project that uses a different ui library.
(wanted to find an alternative that has seamless/easy upgrading between angular version than the one i am using)

but One thing I noticed right away was the confusing and continuous battle against the styling in terms of customizing the theme and customizing specific parts within a component.

I'm hoping ngzorro dropping less would help simplify customizing themes and styling and also allow for us to use https://ant.design/theme-editor?theme=dark or tailwindcss to make customizing styling even more easier.
https://zardui.com/ is an alternative but seems 'too new and barebones compared to ngzorro' to be even considered to use for a production app.

I like to say it may be my inexperience with this library and that the struggle is only during setting up but I didn't expect to struggle this much.

that being said, Anyone have a working example on how to toggle between themes and customize those themes with working variables?
I was able to get some sort of working theme toggling but customizing themes with less in a scss project is becoming a nightmare due to my inexperience with less.
I can't seem to use any css variables with ngzorroantd to customize the predefined themes.
The only way I was able to get my prototype app to change primary color was to put the less variable, like @primary-color: Rebeccapurple; in base.less which I would like to avoid and put my custom theme in a separate file. #6673