Grunt Watch in Magento2 - Extend.less not reflecting changes on site

Grunt Watch in Magento2 - Extend.less not reflecting changes on site

Published: 5/23/2018

I spent approximately half a day trying to figure out why my _extend.less file doesn't update the master stylesheet (and therefore show my changes) in Magneto 2.

There are a lot of stack overflows and small blogs showing that files and folders need to be cleared, static cache needs to be emptied and hair needs to be pulled out in order for it to work.

I tried all of these and sure enough my changes showed up. However when running Grunt Watch - the changes didn't take effect. Which meant that each change to the .less file required another static-cache clear-out. This isn't how I roll…

What did work however, was making sure my dev/tools/grunt/configs/local-themes.js was set up correctly.

The prerequisites are the following:

  • Create your Magento 2 Theme like a good Magento 2 developer as per the documentation
  • Put Magento 2 into developer mode (php bin/magento deploy:mode:set developer)
  • Keep the cache turned on (unless you want to make a brew between each refresh)
  • Set up Grunt as per the documentation

Then you want to do what all the other blog posts and SO questions tell you - clear the decks. To do this I typically make a small file within the bin directory of the Magento 2 installation (/path/to/store/bin - where bin/magento lives). I called this one "dev":

php magento deploy:mode:set developer
php magento cache:disable
php magento cache:flush
rm -rf ../generated/*
rm -rf ../var/cache/*
rm -rf ../var/view_preprocessed/*
rm -rf ../var/page_cache/*
rm -rf ../pub/static/*
php magento cache:enable
cd ..
grunt refresh
grunt watch

So this sets everything up for me - makes sure we're in developer mode, disables cache, clears it - clears some folders, enables cache - then runs grunt from the root Magento 2 installation. To run it just type "bash dev" or simply "dev" if you're already in bash.

All I want to do is extend the Blank theme - so the documentation states to simply add an _extend.less file into <module>/<theme>/web/source/_extend.less

This is fine - but gets confusing - as when I run grunt watch I see that only the _extend.css file is updated.

What you need to do is to make sure that (f you are extending blank or luma) you specify the styles-l and styles-m in your grunt configuration as well as the _extend.

custom: {
    area: 'frontend',
    name: 'custom/default',
    locale: 'en_GB',
    files: [
        'css/source/_extend',
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

You don't actually have to have these files in your custom theme - I simply only have the _extend.less. But when you edit _extend.less, it will also refresh your styles-l and styles-m taking into account your extend changes.

Now you should be able to simply edit the _extend.less file and see your changes updated without having to clear anything out!