Magento2: Grunt watch does not work on preprocessed files

[amenk]

This is a follow up to #1619 - the error was not fully fixed there.
You can see it in the code of the patch: Only if the file was _not_ changed trough preprocessing, a symlink is created. If it was, still a copy is created and grunt watches the wrong files for changes.

Preconditions

1. Magento 2.1.0

2. Theme with preprocessed file, for example a custom Magento_Theme/module.less contains
   //@magento_import 'module/_collapsible_navigation.less';

   Steps to reproduce

3. Execute grunt watch

4. Change the above module.less
5. grunt watch does not detect the change

6. ls reveals: in pub/static there is a (modified) copy of the file, not a symlink. grunt watch -v reveals, only pub/static but not app is watched.

   Expected result

7. Grunt should watch all file changes

   Actual result

8. Grunt does not watch changes to all files, because some files are not symlinks

[aaronsturm]

It has been 4 months, any update on this from the Magento team?

[InsomniakDev]

got the same problem since i started with magento, no news yet

[andrew-aladev]

I am laughing and I can't stop for 10 minutes.

http://magento.stackexchange.com/questions/85144/magento-2-grunt-exec-does-not-actually-create-symlinks

1. Remove Cache
2. Clean theme by command : grunt clean
3. Run CMD command prompt with administrator privilege.
4. run command : grunt exec:yourthemename
5. run command : grunt less:yourthemename
6. run command : grunt watch

Ok sure, lets do it.

I've done it, than I've seen an additional message:

Edit Alex: Basically working and the right solution, but with the limitations of https://github.com/magento/magento2/issues/6367

ls reveals: in pub/static there is a (modified) copy of the file, not a symlink. grunt watch -v reveals, only pub/static but not app is watched.

[BenSpace48]

Still no word on this Magento? 😢

[KrystynaKabannyk]

@amenk, thank you for reporting the issue, the internal ticket is created MAGETWO-69571.

[electricBonfire]

+1

[electricBonfire]

I have 2 files in my theme: /web/css/source/_extends.less and /web/css/souce/_colors.less. If I @import "_colors" in my _extends.less file and then run grunt exec:my_theme the pub/static/..../css/source/_extends.less is not created as a symlink. If I remove the @import it is created as a symlink. I'm not sure if this is the intended behavior but has caused me lots of frustration. Hoping this helps solve others issues.

[ShapesGraphicStudio]

Hi, I had the same problem here, grunt watch was not "seing" my changes / uploads.
It was working great until I updated to Magento 2.2.0.

I weirdly had to remove
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900,900i');
from my CSS.

[electricBonfire]

@ShapesGraphicStudio @imports will not work for grunt watch / less compilation. It is documented though it is easy to miss. I find the documentation for magneto to be lacking / poorly organized:

http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-preprocess.html

• the import directive rules of usage section

[ShapesGraphicStudio]

@electricBonfire , thanks for the link !!
I did some googling though, but did not cross that page.

[ksz2013]

Hi
@ShapesGraphicStudio try including your custom @import font directive with .css postfixed.
In your example: @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900,900i.css');

For me this resolved the problem.

[mishanino]

distributed-cd

[magento-engcom-team]

@mishanino thank you for joining. Please accept team invitation here and self-assign the issue.

[danemacmillan]

Any update on this?

[magento-engcom-team]

Hi @TomashKhamlai. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 6. Add label Issue: Confirmed once verification is complete.

• [ ] 7. Make sure that automatic system confirms that report has been added to the backlog.

[TomashKhamlai]

@amenk, thank you for reporting this issue. I reproduced your issue.
Here is the output:

Running "watch" task
Waiting...
Verifying property watch exists in config...OK
Verifying property watch.blank.files exists in config...OK
Verifying property watch.luma.files exists in config...OK
Verifying property watch.backend.files exists in config...OK
Verifying property watch.setup.files exists in config...OK
Verifying property watch.updater.files exists in config...OK
Verifying property watch.reload.files exists in config...OK
Live reload server started on *:35729
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/_setup.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/_messages.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/_navigation-bar.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/_progress-bars.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/_tooltips.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/tooltips for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/tooltips/_password-strength.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/components/tooltips/_tooltips.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_buttons.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_classes.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_collector.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_extends.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_forms.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_icons.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_lists.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_structures.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_utilities.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_variables.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/utilities for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_checkbox-radio.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_forms.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_legends.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_multiselects.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_selects.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/forms/_validation.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/utilities/_animations.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/utilities/_grid-framework.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/utilities/_grid.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/utilities/_vendor-prefixes.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_common.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_customize-your-store.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_install.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_landing.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_license.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_readiness-check.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/setup/styles/less/pages/_web-configuration.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_data-grid.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_header.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_menu.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_modals.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_navigation-bar_extend.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_page-inner.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_common.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_extension-manager.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_home.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_login.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_extends.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_forms.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_lists.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_structure.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_typography.less for changes.
Watching app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_variables.less for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/css/styles-old.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/css/styles.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/extjs/resources/css/ext-all.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/extjs/resources/css/ytheme-magento.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/jquery/colorpicker/css/colorpicker.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/jquery/fileUploader/css/jquery.fileupload-ui.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/jquery/jstree/themes/default/style.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_Braintree/styles.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_ConfigurableProduct/product/product.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_Paypal/styles.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_Paypal/js for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_ProductVideo/css/gallery-delete-tooltip.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_Swatches/css/swatches.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/Magento_Weee/styles.css for changes.
Watching pub/static/adminhtml/Magento/backend/en_US/prototype/windows/themes/default.css for changes.

I do not see any app/design/frontend/* so it is still the issue.

[magento-engcom-team]

@TomashKhamlai Thank you for verifying the issue.

Unfortunately, not enough information was provided to created internal ticket. Please consider adding the following:

• [x] Add "Component: " label(s) to this ticket based on verification result. If uncertain, you may follow the best guess

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[magento-engcom-team]

Hi @TomashKhamlai. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [x] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [x] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [x] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [x] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [x] 6. Add label Issue: Confirmed once verification is complete.

• [ ] 7. Make sure that automatic system confirms that report has been added to the backlog.

[fascinosum]

@TomashKhamlai you must execute grunt exec:blank so that you can see frontend theme files in the list

[fascinosum]

@amenk according to Client-side LESS compilation, this is the expected behavior.
@magento_import directive is processed and the result code differs from the original .less file.
//@magento_import 'module/_collapsible_navigation.less'; in the process file will be
@import 'module/_collapsible_navigation.less';. Due to this difference, the file will not be linked, but will be created as a static file

[riconeitzel]

A quick summary how grunt:watch works smoothly with @import rules: https://magento.stackexchange.com/a/310705/5988