How to immediate effect on website after changes in less css code?

Question

I am developing website design on Product listing page by css code in app/design/frontend/Smartwave/porto_child/Magento_Catalog/web/css/source/_module.less file .Whenever I change the css code in above file I have to run setup:upgrade and static:deploy command. This is time consuming process when you develop design. Any trick that after change the code in less file and reflect immediately without execute commands ?

Answer 1

If you install Grunt you can watch and automatically compile LESS to CSS without having to run any commands.

Once installed run grunt less to compile or grunt watch to watch files and automatically compile.

For full indepth instructions and more commands see https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/tools/using_grunt.html

Answer 2

You can use Live Reload and Grunt.
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html