5

I'm trying to figure out the clusterf-ck which is the Magento 2 front-end theming workflow. And I've read and understood all documentation, read all the blogs about it and are up to date on the latest developments. I know it's a hassle to make changes to the styles, and that is the reason Magento decided to implement Grunt, to make this a easier process. But here is where things go wrong;

I use grunt watch:theme; it registers and compiles all my changes just lovely. But it doesn't clear out the pub/static files, so no changes are visible (in other words; a useless function?)

Then there's grunt clean:theme which cleans "everything" to apply made changes. But whenever I make changes and use this command; no changes! This one only works in combination with rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ so what's the idea here?

And when I try grunt less:theme I get an error, which is the first lead I've had so far but no idea what to do with it;

Running "less:theme" (less) task
Destination pub/static/frontend/vendor/theme/en_EN/css/source/_extend.css not written because no source files were found.

Some further info; I've setup a child-theme of the blank default, added my _extend.less in the vendor/theme/web/css/source/ folder. As said before, grunt sees my changes and eventually if I use the grunt clean and clear out the var they do get applied. But this is really time consuming and I simply can't believe there isn't a quicker way to do this. I figure it's something to do with the aformentioned error. Anyone has an idea?

3

I finally figured it out as seen in this topic. At the time I posted this question my main feat was the error (".. no source files were found"). This was solved by running setup:static-content:deploy because the files I had linked in my Grunt config weren't yet deployed to the pub/ folder.

After solving that issue I ran into another (of course) that my Grunt config would see the changes and compile them, but they didn't show. This was eventually due to missing the parent style (style-m) in my Grunt config. More info on that issue in the Github link mentioned before.

2

Make sure you are running in developer mode, and client-side compilation for development. When you are running in both these modes you only need to clear pub/static and var/view_preprocessed when you add a new file to your theme, changes will be picked up on page refresh.

If your changes still don't apply then ensure Varnish isn't caching your less files, that's one problem we had.

  • Running dev mode, no Varnish as of yet and not using the client-side mode on account of 'bad practice' as written in the Magento devs (they advise to always use server-side mode), and as I understand the Grunt actions are implemented just to make my situation work, right? – Alex Timmer Jun 22 '16 at 13:25
  • Tried it anyway, and yes - this works. It takes the frontend an insane time to load, though, so it's still far from perfect - but it works. Still my question stands, what is the use of the addition of Grunt, if they don't do what's promised? – Alex Timmer Jun 22 '16 at 13:31
  • Do you have a source for the always use server-side compilation? I wasn't aware of that. Also, you mentioned you added _extend.css to the theme folder, do you mean a Less file? I'm not sure how it works if you add plain CSS here. That could be part of the problem (although I doubt it), in my brief experience with Grunt and Magento 2 it worked ok. – Ben Crook Jun 22 '16 at 13:36
  • Scuze me; that was false. I read that in an eleborate Inchoo article about it, not in the docs; inchoo.net/magento-2/css-preprocessing-in-magento-2 and yes; I did mean a .less file. Maybe that's something to do with the error about not being able to locate the .css equivalent, but that would be the Magento preprocessing's job.. – Alex Timmer Jun 22 '16 at 13:39
  • Hmm after reading that article it sounds like even when you're using Grunt you will need to clear the directories when you add a new file. That doesn't sound like it improves the workflow much, the best idea I can come up with is to add some functionality it so when Grunt detects a new file then it automatically runs the clean and exec commands. But I'm not too sure how difficult or time consuming that is with Grunt. – Ben Crook Jun 22 '16 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.