magento2: Grunt watch - doesn't see file changes

This is still not fixed. Grunt watch does not work on 2.1.0. Actually, I’d call it completely an utterly broken. Front end workflow is next to impossible with it in this state.

After some more research i managed to fix the watch problem. The problem was caused by the @import statement in my less files. I solved changing every import into a: @import '_myfile.less' -> with single quotes, underscore and .less extension.

I got it working by running these commands once before running grunt watch.

grunt clean
bin/magento setup:di:compile // because grunt clean seems to clear that
grunt exec:<mytheme>
grunt less:mytheme

After that watch works as expected.

Magento comes with “revolutionary” idea: it replaces files from ancestor source with files from successor source. This is the most ridiculous design of inheritance I’ve ever seen.

Magento developers has to dance around ancestor source files and replace them with successor source symlinks on the fly. This is the only one solution to fix grunt watcher in current funny “inheritance” “design”. grunt exec:<theme> is not a solution.

BTW grunt exec:<theme> is completely broken. It can create symlink or it can copy file.

For some reason symlinking does not work when you start the file with @import statements.

When I comment out the below lines the symlinks are created and grunt watch works.

/*
@import url('https://use.fontawesome.com/releases/v5.0.8/css/all.css');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');
*/

@markdavies, Yes, it isn’t fixed. I hate “magento” too. We can add workaround. For example:

ln -s $(pwd)/app/design/frontend/<MyTheme>/default/web/css/{styles.less,styles.mobile.less} \
$(pwd)/pub/static/frontend/<MyTheme>/default/en_US/css/
mkdir pub/static/frontend/<MyTheme>/default/en_US/css/custom_source
sudo mount --bind app/design/frontend/<MyTheme>/default/web/css/source \
pub/static/frontend/<MyTheme>/default/en_US/css/custom_source
grunt watch:<MyTheme>

I’ve found a “magento certification exam” https://u.magento.com/certification. I am laughing and I can’t stop. xDD

Noone passed a “certification exam”, because development is impossible. xDD

Making sure that imports had .less worked for me as well.

This is still an issue. I’m on 2.2.4 and grunt exec does not create symlinks.

Edit:

I can confirm that taking out the @import statements from a less file will allow symlinks to be created. @rasmuswikman

I can also confirm that changing the quotation marks from double to single, and appending the less extension in an import statement will allow symlinks to be created. @Tyrianad

Additionally, I can confirm with absolute certainty that the Magento2 frontend is a fickle, over-engineered, and such a poorly designed POS that it’s effectively the eighth wonder of the world in my opinion. It belongs in Reddit’s /r/DiWHY/, too. It really feels like Magento2 developers took every trendy blog post on design from the last decade and stitched them together into some gross Franken-fetish RealDoll. I feel like I need a degree in WTF to change the color of an anchor tag. Explaining Magento2’s frontend is like Bob Newhart’s comedy skit about tobacco.

I can confirm previous statement of @Tyrianad, changing " to ’ in @import (reference) 'source/lib/_responsive.less'; created a symlink instead of a copy.

for me, this solves the problem, 1st I run “grunt refresh” than I run “grunt watch” and everything working fine after that.

Thanks

@iget-master To me your solutions is not working though 😦 I’m having the worst developer experience lol, I want to quit my job ahah

@Fredwak my solution works perfectly fine for me (and many others I know). I think this problem is a documentation problem on the Magento side. After more playing around (and using multiple themes) I settled on doing this once for every new theme before running grunt watch for the first time.

grunt clean:<mytheme>
grunt exec:<mytheme>
grunt less:<mytheme>

This should be part of the documentation on how to create a new theme.

Note: it might be necessary to re-run these commands if you switched to production and ran the command to deploy your static assets.