Magento 2: Reflect CSS Changes Directly

Question

I am working on Magento 2 Theme Modification. Whenever we make chages in theme css less files. our changes are not reflect directly.

Developer mode is already enabled. To show the changes, we have the following options:

Option 1. clear Static file cache from backend.

Option 2. Remove all files from pub/static/ folder except .htaccess file, So that required files automatically generated.

Option 3. run php bin/magento setup:static-content:deploy command

My question is: Is there any other option so that When I make changes in the theme less css file, It will automatically reflect ?

I tried to search on the web but didn't find any answer. Some people suggested to directly work in pub/static file css and then copy in theme css file. I think this is Not recommended and not as per standard.

Answer 1

My workflow local with Developer Mode set and changing less files is: 1. remove everything in Folder var/view_preprocessed/ 2. remove everything in Folder pub/static/frontend/your Vendor/your theme/ 3. clean cache

it ́s almost equal to Devdocs from Magento http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_mode.html

Works great for me with Version 2.0.4

Also see this Post here on Stackexchange Magento2: Best practice to modify css files

Answer 2

Mainly you need to clear the two folders to reflect the changes in the styles

 pub/static 
 var/view_preprocessed

You can read the related info in the below Magento dev docs

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/cache_for_frontdevs.html

I just wrote a small bash script in the Magento root to clear the cache (clearCache.sh)

cd pub/static
pwd
rm -rf *
cd ../../var/view_preprocessed
pwd
rm -rf *

In your command line

sh clearCache.sh