Showing results for 
Search instead for 
Did you mean: 

Problem with extending Luma theme using Grunt with Less

Problem with extending Luma theme using Grunt with Less

I am trying to extend from the Luma theme in Magento 2.1 but I ran into several problems.


First of all, my theme isn’t extending properly. The templates and xml files all seem to work. My clients logo (defined in default.xml) is showing and I have a footer block which shows some static blocks from the admin and these are showing as well.


Here’s a screenshot of the theme structure:


But when I open the website I seem to be missing some, but not all, parts of the CSS. For example, there is a link “Compare Products ()” in the right side of the header (next to the search field) which has a class “no-display”. When I change back to the Luma theme this class has a “display: none;” in the CSS and therefore doesn’t show. But when I switch to my custom theme, the class “no-display” doesn’t exist in the generated CSS and so the link shows. Yet the same element has a class “action” which does exist in the generated CSS (and comes from the Luma theme).


Here’s a screenshot of the problem:


The other problem is that Grunt with Less won’t work. I followed the instructions on and while we did get Grunt to run without errors, the “watch” command didn’t do anything. I extended the Less according to but to no avail. Even manually deleting the files in pub/static en var/view_processed doesn’t fix the problem.


I’m working in developer mode and all caching is disabled. I have run the command php bin/magento setup:static-content:deploy --theme Twm/degr nl_NL and I can see files being generated in pub/static/frontend/Twm and var/view_processed corresponding to my theme.


I have tried several online solutions yet none of them seem to work.


What am I doing wrong?


Re: Problem with extending Luma theme using Grunt with Less

So, I've finally figured it out. Instead of making symlinks in pub/static the files were copied there. The correct workflow now is to delete all folders in pub/static (do not delete .htaccess) then run

php bin/magento setup:static-content:deploy --theme Vendor/theme

 (optionally add the right locale) and after that run

grunt exec:theme


grunt less:theme

 (and grunt watch if you want to start editing again). Now the symlinks are created in pub/static and grunt watch is able to pick up the changes.