Problem with extending Luma theme using Grunt with Less

Question

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: https://i.sstatic.net/ZR02P.jpg

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: https://i.sstatic.net/sHHsI.jpg

The other problem is that Grunt with Less won’t work. I followed the instructions on Magento devdocs and while we did get Grunt to run without errors, the “watch” command didn’t do anything. I also extended the Less according to Magento devdocs 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?

Answer 1

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 except 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.