cancel
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: 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

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.