Magento 2 Frontend development

0
66

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 :

admin_collapsed
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.