cancel
Showing results for 
Search instead for 
Did you mean: 

Problem with extending Luma theme using Grunt with Less

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

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: http://imgur.com/ISzZZnF

 

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: http://imgur.com/SBUy53I

 

The other problem is that Grunt with Less won’t work. I followed the instructions on http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq and while we did get Grunt to run without errors, the “watch” command didn’t do anything. I extended the Less according to http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html 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?

1 REPLY 1

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

 and

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.