Magento2 – How to Fix Grunt, .less, and Live Reload Issues

gruntlesslivereloadmagento2

Good afternoon,

I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {themeDir}web/css/source/_theme.less I do not see the changes. The only time I can see the change is after running a grunt clear command, and the manually reloading the page.

It seems like the change only gets moved to pub/static after that folder is cleaned, and the contents are reloaded. In other words, this is exactly what grunt should be doing for me, from what I understand.

I have been stuck on this for days.

I am able to get the following from grunt exec:{themeName} & grunt less:{themeName}:

grunt exec

grunt less

Best Answer

Try this

grunt --force clean:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt exec:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt less:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Smartwave/porto

grunt watch

But Make Sure Define Less Function in /dev/tools/grunt/configs/themes.js

porto: {
    area: 'frontend',
    name: 'Smartwave/porto',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},
Related Topic