Update: I recommend to use Gulp instead of Grunt and use SASS instead of Less. Magento 2 will move from LESS to SASS from Alan Kent
When you’re creating a new theme or adjusting current theme, to see a new change you have three options : Frontend Developer Workflow
References : Simple style changes with client-side LESS compilation vs. server-side
1/Making simple style changes in server-side compilation mode
2/Making simple style changes in server-side compilation mode using Grunt
3/Making simple style changes in client-side compilation mode
In this article, I just focused on the 3rd using client side compilation mode because it’s more convenient and easy for me to see change applied.
To set it up :
1/ Set developer mode : php bin/magento deploy:mode:set developer
2/ Run php bin/magento setup:static-content:deploy to create static resources.
3/ In Store – > Configuration -> Advanced Developer -> Under Front-end development workflow, in the Workflow type field, select the compilation mode as client side compilation and save the configuration => Refresh caches.
You might have a problem with collapsed admin interface after changing. To fix it :
You have to follow below simple steps to do working:
1/ You have to remove magento2/pub/static/frontend and magento2/pub/static/adminhtml folder.
2/ Run php bin/magento setup:static-content:deploy mode for generated new static resources.
Done. Now when you change css, just refresh you page – new change will be applied.
If you have problems with missing css during refresh, please check your permission on pub/static folder and var folder.
Happy coding.
COMMENTS