Magento2: Grunt watch - doesn't see file changes

[davefarthing]

[QUESTION]
I have node installed and have run 'npm install' but when trying to use grunt watch doesn't pick up on any of the changes i'm making.

I can successfully run 'grunt refresh' to recompile but watch does nothing.

it runs without error or warning and sites at a prompt:
Running "watch" task Waiting...

If i then make a change in the less files e.g. app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/_module.less (simply trying to change option title color)

No change is recognised and no recompile occurs. I'm running under OS X if that has any influence.

What am I missing (or not understanding)?

ALSO:

according to http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

"grunt exec:
Republishes symlinks to the source files to the pub/static/frontend/<Vendor>/<theme>/<locale> directory."
All of my files are in pub/static/frontend/.. as copies not as symlinks (is this wrong)

[bgkavinga]

It does not work for me too. I tried on Linux and Windows.

[davefarthing]

Ok - a little more information.

Grunt watch does pick up changes i make to files in pub/static
e.g. if i make and edit to pub/static/frontend/Magento/luma/en_US/Magento_LayeredNavigation/css/source/_module.scss

However this file is not a symlink (I believe it is intended to be) rather is is a copy of the theme's file.

So I think the problem is that grunt exec is not creating symlinks but copying the files instead..

[godban]

Same in #1590

@davefarthing, @bgkavinga
Hello, thank you for reporting this issues. We localized a problem, you are right, currently copies of LESS source files are created instead of symlinks in client side less compilation.
Created internal ticket for that MAGETWO-40652

[davefarthing]

Great Thanks!

Just to clear things up a little: should grunt watch work with server-side compilation? I've tried both but didn't like the client-side compilation, I was under the impression grunt was a solution offering auto refresh from server-side compilation (!?).

My current settings are to have server-side compilation and grunt exec/watch. (if that helps bottom out the problem)

[godban]

Just to clear things up a little: should grunt watch work with server-side compilation?

My current settings are to have server-side compilation and grunt exec/watch. (if that helps bottom out the problem)

@davefarthing yea, mine too. grunt refresh actually use the same mechanism as server side compilation do and than works with generated files with grunt watch or grunt less:{theme}.
So answer for your question is yes.

Client side compilation is more another feature that can be used for quick changes, when developer not familiar with Grunt or not have node.js or don't want each time manually delete pub/static/... for php compilation which also really slow.

[godban]

Should be fixed. Please update to the latest version

[davefarthing]

Hi,
Do you mean the latest version from Master?

I have pulled that latest master, but the problem still exists. I can see that the source less file are now under 'var/view_processed/source' rather than 'pub' but they are still copies of the original modules' less files rather than symlinks.

Same symptoms:
'grunt refresh' picks up my theme changes. Presumably because it first cleans and re-copies the file from the theme source to the 'var/view_processed/source' folder.

'grunt watch' doesn't see any changes to the theme files

'grunt less:luma' doesn't see any changes either.

If I 'grunt clean:luma' first then 'grunt less:luma' it will show my changes.

Seems again the only missing piece is file copies as opposed to symlinks.

[mazhalai]

@davefarthing All fixes are delivered to develop

[godban]

@davefarthing latest default develop branch
I have checked this one.

[debuysserk]

@godban we're having the same issues on the master branch as written here. But however we try to switch to or merge the develop branch into the master, we can't get our current 1.0.0 beta (with sample data) to work with the develop files. Grunt install fails too by the way, on the step "npg instal". Something to do with phantomjs.

We're currently deleting both the preprocessed files & the pub/static files (although preprocessed files cache is disabled). Only when both of these dirs are empty, and we reload the pages, everything is fine (although sometimes on 2nd load, which is a known issue because of slowness). It looks like the pub/static files are created from the preprocessed files in the var directory, so deleting both of these is the only way we can see our css/less updates.

We're in the process of creating our own base theme, extending the blank theme, but are running into these less issues & some others we're hoping to be fixed in one of the thousand commits the develop branch is ahead of the master.

Thx.

[godban]

@debuysserk here is a patch https://gist.github.com/godban/8cb178f9a84ed85f1eac
It should solve issue with symlinks generation in beta.

[debuysserk]

thx @godban . I got it working but still some weird stuff :

When the pub/static & preprocessed files are empty, and I load the pages. Those directories are filled.

• preprocessed with less & source directories of my theme. In the source directory are only the compiles css it seems (print.css, styles-l.css, styles-m.css).
• the pub/static dirs is filled with css & js files (mostly). the css files are actual documents, js are mostly aliases (symlinks).

When updating the less files in my theme, grunt watch does not pick things up.

BUT, when I use the magento bin command on my theme to deploy the styles-l & styles-m than this creates .less aliases in the pub/static dir. And then, when I edit my source less files in the theme again, grunt watch DOES pick my changes up and compiles them instantly, without having to use the deploy command again.

Is this expected behaviour? Thx!

[BlackIkeEagle]

From what I see the grunt watch command picks up css files ? I don't see why it should be watching the css files. From what I see it should be watching the changes on the less files to generate new css files.

[praful-rajput]

I am facing this issue. Anyone can help me please to fixed it ?

[BlackIkeEagle]

@vasuscoin

from what I see you have grunt installed globally.

Following steps must be completed before grunt {exec,watch,...} will work:

$ npm install grunt --save-dev
$ npm install

If you are working on a custom theme you probably will have to update dev/tools/grunt/configs/theme.js

before you run grunt watch or grunt exec make sure your static files are cleared and you run bin/magento dev:source-theme:deploy with the appropriate params.

then you can run grunt with any of its tasks.

for additional info, see the devdocs: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

[praful-rajput]

@BlackIkeEagle
I have done all above process once again. Still , same issue is here.
I have donwloaded this m2 Full Release with Sample Data (ZIP with sample data) from https://www.magentocommerce.com/download

Is any solution please ?

[BlackIkeEagle]

@vasuscoin Could you test it in a vagrant (linux) machine. Maybe its just an issue with windows. If so I cannot really assist you since I have no access to a windows machine.

You can use https://github.com/alankent/vagrant-magento2-apache-base for quick testing.

[dav1dian]

@BlackIkeEagle
i see same issue on my local machine (Win7). So i guess that this bug was not fixed.
i even raised one more issue, but unfortunatly have no answer yet.. but cases i little bit different for me
https://github.com/magento/magento2/issues/3447

i tried to run everything you mantioned above, but unsuccessful

[BlackIkeEagle]

@dav1dian I think it will not work on windows since the feature relies on symlinks to work

[dav1dian]

@BlackIkeEagle
windows supports symlinks as well.. and for me it works fine, untill i trying to import one .less file to another, and it's just creating a copy, instead of symlink

[BlackIkeEagle]

@dav1dian oh i did not know windows supports symlinks. sorry can't help you further

[praful-rajput]

@BlackIkeEagle
Thank you. Its working fine.

[sshrewz]

This issue has been resolved. Do let us know if you encounter any other issues by submitting a new issue.

[FreederFree]

I've got the same issue! The Problem is as follows: I have two less files in my <vendor>/<theme>/web/css directory, one called _style.less and one calles _variables.less.
The _style.less file imports the _variables.less file. If I run grunt exec it creates a symlink of the _variables.less but a real file of _style.less in the pub/static folder. So whenever I change the _variables.less file, everything goes just fine, both files are updated after running grunt watch. But whenever I change the _style.less, nothing happens, because it doesn't exist as symlink!

What am I doing wrong?

[amenk]

@snohe In which commit / version was it resolved? Still seem to have the issue in Magento 2.1.0

[amenk]

I think I found the commit by myself: 149309c084abf4356ccbea0b8f3229c3a6c868bd
It is supposed to be in since 2.0.0-rc - so definitely in 2.1.0
Still having problems ...

[amenk]

Seems just to happen only for some less files (probably if it was changed through preprocessing ... still bad for the work flow)

[amenk]

Still not fully fixed, see my follow up #6367

[markdavies]

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.

[andrew-aladev]

@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

[andrew-aladev]

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.

[kamleshyaduwanshi]

Hi, I am facing similar issue and tried all steps mentioned above without luck, any concrete solution on less file compilation issue???

[Januszpl]

Unfortunately I work on some project with less and grunt instead of https://github.com/SnowdogApps/magento2-frontools that I have the pleasure to work in most of projects... and I experience similar problems reported here...... I have to take a deeper look into it but overall it's not good experience ...

[Tyrianad]

I am setting up a magento 2.1 and the problem seems to still be there. Any idea on how to solve the problem?

[anpel]

@Tyrianad see @markdavies comment above. I just gave up and used 1.9 for my project, hope things are better in 2.2.

[Tyrianad]

@anpel Well... great.... i did know Magento 2 had some problems but couldn't imagine this big.

[Tyrianad]

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.

[SanderJP]

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

[dakira]

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.

[cleggypdc]

@dakira cheers that solved my issues with sourcemaps not showing up too

[rommelfreddy]

That issue is marked as closed, but it still occurs.

only with the solution of @Tyrianad it work - but is this the correct solution?

If you create following structure: (and not note the infos of @Tyrianad)

• _extend.less (Include file _includes.less)
• _includes.less (include files typography/_header.less, typography/_footer.less)
• typography
  ++ _header.less
  ++ _footer.less

The includes are made _without_ @Tyrianad solution.
The file _extend.less will be no symlink.
The file _includes.less will not be exist.
The file _header.less will not be exist.
The file _footer.less will not be exist.

Maybe this bug is a similar problem ...

[dakira]

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

[rommelfreddy]

oh sorry - i have missed to add the text "(and not note the infos of @Tyrianad)"

[ghost]

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');
*/

[danemacmillan]

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.

[akmur]

Hello, I am also having this problem.
To see changes to a theme file I have to run

grunt clean

followed by

grunt less:themename

However this doesn't seem the way it should be. I have been following the Magento guide, so I have no special configuration or anything.

[akmur]

This is my workaround for this problem.

Go to your terminal

npm install --save-dev onchange

then open package.json in the magento root,

and add this bit

  "scripts": {
    "watch": "onchange -w -d 1000 ./app/design/frontend/MYTHEMEVENDOR/MYTHEMENAME/**/*.less -- grunt clean && grunt less:MYTHEMENAME"
  },

replace of course what's in capital letters with your folder names.

then from the terminal:

npm run watch

Now it will watch for changes and run the clean and less tasks when a change happens.

Ugly workaround I know.

[iget-master]

@akmur, the problem with your proposed solution is that grunt clean deletes all files (including JS) and cause everything to recompile, and it's a ton of files.

The "fix" that I wrote on my angry post does work, but it's a pain to remember to always append the .less on files and to use single quotes. Really don't know how hard is to fix this issue, but I think that it's not too hard, looks like just a parsing issue.

[akmur]

@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

[iget-esoares]

Are you on linux? Can you post a the result of ls -la pub/static/frontend/Yourthemevendor/.../css/sources ?

[iget-master]

@akmur Actually, you said that are running grunt clean && grunt less:themename, but you are not running grunt watch? The grunt watch is responsible for automatically reload changes without needing to clean and less again.

The problem here is related to grunt watch itself, that should do the same trick as your npm run watch script.

[akmur]

@iget-master sorry I omitted that I started all this because grunt watch does nothing :)

[akmur]

@iget-esoares I only have a print.css...

[joshdavenport]

For anybody still experiencing this issue, making changes suggested by @Tyrianad here fixes the issue. This is still happening but can be "worked around" by including LESS files consistently in this way.

[imranrbx]

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

Thanks

[riconeitzel]

If anyone comes here because one or more *.less files are copies instead of symlinks and grunt watch doesn't watch these files:

See here: https://magento.stackexchange.com/a/310705/5988

[carlos-reynosa]

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