Less with Ant Design

Interesting that I never really used LESS while call myself a web developer. Learning Ant Design gives me a good opportunity to explore it as lots of Ant design’s style customizing is done by LESS.

What is LESS

  • Leaner Style Sheet
  • Backwards compatible with CSS
  • It basically bakes in programming capacities into CSS.

Some useful features that solves problems I had before

  • Nesting: No more need to combine selectors, and make the CSS structure consistent with my HTML
  • Mixins: No more duplicate styling
  • Variables: simpler to write than CSS variables

Cacro and Ant Design Plugin

Cacro - Create React App Configuration Overrid

Get all the benefits of create-react-app and customization without using ‘eject’ by adding a single craco.config.js file at the root of your application and customize your eslint, babel, postcss configurations and many more.

Ant design allows user customisation of styles via a cacro plugin - craco-antd. This plugin helps overriding theme variables in ~antd/dist/antd.less imported into my less files. Behind the plugin is the variable overriding feature of less-loader.

Trouble shooting: my overriding takes no effect 🤔

overriden

It looks that the original setting is still loaded and overrules the value I set in craco.config.js.