Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Less client side compilation problem. #1787

Closed
tapansoda opened this issue Sep 4, 2015 · 45 comments
Closed

Less client side compilation problem. #1787

tapansoda opened this issue Sep 4, 2015 · 45 comments

Comments

@tapansoda
Copy link

I have changed configuration in the backend -> Store - > Configuration -> Advanced Developer -> Under Front-end development workflow, in the Workflow type field, select the compilation mode as client side compilation and save the configuration. Once configuration is saved, backend and frontend both breaks. Looks to me that compilation does not work properly.

At frontend I see an error 'FileError: 'http://localhost/magento2/pub/static/frontend/Magento/luma/en_US/Magento_Sendfriend/css/source/_module.less' wasn't found (404).

@tapansoda
Copy link
Author

The following issues looks to be similiar to me.
#1619
#1623

@gotbahn
Copy link

gotbahn commented Sep 4, 2015

Hello @tapansoda,
seems you have an outdated version, because current one have fixed this problem:
app/design/frontend/Magento/luma/Magento_SendFriend/
Please update your fork to the latest version.

@tapansoda
Copy link
Author

Hello Godman, thanks for your quick response.

It does work now, but I think the script runs really slow. Due to slowness it seems at times the script does not get complete. Any reason behind it ?

@tapansoda
Copy link
Author

Also we did notice that the same does not work with sample data usage.

@gotbahn
Copy link

gotbahn commented Sep 7, 2015

@tapansoda client side compilation mode via browser mostly used for quick changes, it is not the best way to develop.

I recommend you to switch to local compilation with Grunt http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq

@tapantechno2007
Copy link

I have referred this link previously, I tried to compile using grunt watch but it does not work, I have made multiple changes inside LESS file but grunt watch does not compile at all.

If there any configuration that needs to be done for grunt watch, it keeps on saying waiting but at last there is no result.

I followed the entire documentation to install grunt, grunt exec, grunt watch command but grunt halts the process and does not resume at all. Wondering that issue it could be ?

For testing purpose I am trying to change background color of navigation, for the first time it works well, I fresh page, compilation works, but next time when I use the same process and refresh page OR use grunt watch it does not get complied.

Looking forward to your response.

@gotbahn
Copy link

gotbahn commented Sep 7, 2015

@tapantechno2007 gotcha, currently we are working on documentation to better describe basic scenarios. One of them:

  • use grunt refresh for initial run - it will clean up everything, generates symlinks and compile styles
  • than run grunt watch - it start watching for symlinks changes

please note that, if you adding, rename files or change collectors files (that includes @magento_imports, as example styles-m.less) you need to regenerate symlinks with grunt refresh

@tapantechno2007
Copy link

@godban I tried running grunt refresh and then grunt watch as you suggested. Attached is the screenshot, the same happens grunt watch does not work.
grunt

@gotbahn
Copy link

gotbahn commented Sep 7, 2015

@tapansoda please make sure that you have latest magento version, this bug was fixed since last week

@tapantechno2007
Copy link

I am on master branch and have taken latest pull till today ? Is that enough OR anything else needs to be done ?

@tapantechno2007
Copy link

@godban In order to take the latest pull, I follow the following is that correct ?

  1. Go to root of magento2 setup in GIT Bash.
  2. Make sure it is on master branch
  3. Take git pull origin master.

OR do I need to switch to develop and take pull ? And always work on develop branch ? It is not that bugs once fixed are at master branch and we need to take pull of master branch ?

Highly appreciate your response on the same !!

@gotbahn
Copy link

gotbahn commented Sep 7, 2015

@tapantechno2007 latest changes (bugfixes) are in develop branch, you can merge develop branch into yours with git merge origin/develop

@tapantechno2007
Copy link

Thanks @godban I will give it a try in some time and let you know the outcome.

@tapantechno2007
Copy link

Hello @godban I still have the same issue after taking latest pull from develop branch. It still throws the same error 'Cannot create symlink' when running 'grunt refresh'

@tapantechno2007
Copy link

I see a solution here which works but behaves differently. http://magento.stackexchange.com/questions/64802/magento-2-404-error-for-scipts-and-css.

For the first time grunt refresh works fine, but subsequent time neither grunt refresh NOR grunt less:theme works. Also grunt watch does not work at all

I am not sure if the solution given in the link is correct OR not as develop branch does not have that code updated. I am working on windows 8 system with wamp 2.5 and maybe symlink has some permission issues with working correctly.

Looking forward to your response.

@gotbahn
Copy link

gotbahn commented Sep 7, 2015

@tapantechno2007 show me please what you have in

  • lib\internal\Magento\Framework\Css\PreProcessor\Instruction\Import.php
  • app\code\Magento\Developer\Console\Command\CssDeployCommand.php

after merge

@tapantechno2007
Copy link

@godban I have dropped you an email with an attachment to the above files at bogdanplieshka@gmail.com.

@hiteshkoshti
Copy link

Same issue for me :

Currently I have changed below code in app\etc\di.xml :

Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink

TO

Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

For the first time grunt refresh works fine, but subsequent time neither grunt refresh NOR grunt less:theme works. Also grunt watch does not work at all

I am working on windows 7 system with wamp 2.5 and maybe symlink has some permission issues with working correctly.

@gotbahn
Copy link

gotbahn commented Sep 8, 2015

Hello @hiteshkoshti MaterializationStrategy should be Symlink.

@tapantechno2007 I found issue with grunt:refresh it works only with blank & luma, will fix that asap. For the moment please use, described in documentation way:
grunt clean
grunt exec:theme
grunt less:theme
grunt watch

@rg007
Copy link

rg007 commented Sep 8, 2015

@godban I have followed the same procedure to run grunt, but grunt watch still not working
I have defined my theme in \dev\tools\grunt\configs\themes.js

Is there any other way to compile less without using GRUNT ? And how to use that way ?

@gotbahn
Copy link

gotbahn commented Sep 8, 2015

hello @rg007, what grunt less:theme says?

Is there any other way to compile less without using GRUNT ? And how to use that way ?

Yes, but they have some cons comparing with local compilation:

  • Server side. You can clean up pub/static/frontend and in this case php processor will recompile everything.
  • Client Side. In Admin area > Stores > Configuration > Advanced > Developer > Front-End development workflow -> Client Side Compilation

Better would be find out all issues with Grunt compilation and fix them.

@rg007
Copy link

rg007 commented Sep 8, 2015

img_08092015_134745

Hello @godban , I have attached the screenshot after running the grunt:less command, and then I tried grunt watch command and made some changes in app\design\frontend\Krish\mytheme\web\css\source\ _theme.less. it keeps on saying waiting but at last there is no result.

@gotbahn
Copy link

gotbahn commented Sep 8, 2015

@rg007 well, at least less processing works fine

'grunt watch' can not see changes in one case, if symlink to editable file not generated in pub/static/...>

Symlinks generated by default if pub/static is empty or with grunt exec:theme command.

Please make sure pub\static\frontend\Krish\mytheme\en_US\css\source\_theme.less is a symlink and not a file copy.

If it is copy, than problem is in symlink generation. This problem was solved week ago and maybe your current environment is outdated and still have this issue.

@tapantechno2007
Copy link

@godban I think this needs testing in windows, this might work correctly for Linux but definitely does not work for windows users. Maybe you can have this explored further with the core team.

I have debug this further and came to know about the problem with symlink function in PHP. The file that throws error is the following (lib\internal\Magento\Framework\Filesystem\Driver\File.php), there is a function in this file symlink which throws an exception.

@okorshenko okorshenko added the CS label Sep 8, 2015
@tapantechno2007
Copy link

Hello @okobchenko what does CS Label mean, anymore update over this issue we have checked this further and noticed this is a problem with Linux as well.

@okorshenko
Copy link
Contributor

@tapantechno2007, CS label means that this issue relates to Customer Services (CS) domain.

@tapantechno2007
Copy link

@okorshenko So how do I find an update over this issue, if its fixed, not fixed yet OR a thread where this is discussed further?

@rg007
Copy link

rg007 commented Sep 17, 2015

@godban and @okorshenko , Now I am usinng fresh copy of Magento 2, still not able to compile Using Grunt Watch.

Looking forward to your response.

@gotbahn
Copy link

gotbahn commented Sep 17, 2015

@rg007 can't say what exactly wrong, current develop works fine, merchants that already tested it have no problems to run Grunt. So I can just suggest only check next things:

  • your theme should be declared in dev\tools\grunt\configs\themes.js
  • you have run grunt exec:theme or grunt refresh before a run grunt watch

Also please mention that if you changing files that compiles into css (styles-l.less as example), watch task would't work with them.

If problem will still occurs, only way to help you is direct debugging of your fork. We can do it if you will share it to us.

@tapantechno2007
Copy link

@godban Grunt watch does work but it works for less file that are generated into pub/static folder. If I go to pub/static folder and change less files and run grunt watch then it works.

But I think the workflow should be like it should work for less files inside my theme right? for example:- \magento2\app\design\frontend\Magento\blank\web\css\email.css is changed that grunt watch should generate .css OR update.

In short what I noticed it grunt watch works fine but works on a wrong path it works with pub/static instead it should work with my theme. Can you guide me on this?

@gotbahn
Copy link

gotbahn commented Sep 19, 2015

@tapantechno2007 become clear, that in pub/static you have deployed files instead symlinks.

The workflow should be next:

  • You generates symlinks that match your original theme, and then changing files in original theme.
  • Watch task should watch only pub/static content

Somehow your fork not generates symlinks to pub/static, instead it generates copies.

This was known problem couple weeks ago. Now it is fixed. Please make sure that
lib/internal/Magento/Framework/Less/PreProcessor/Instruction/Import.php &
app/code/Magento/Developer/Test/Unit/Console/Command/CssDeployCommandTest.php
in your fork are identical with develop branch

Also I can give you a patch that fixes this problem for beta release
https://gist.github.com/godban/8cb178f9a84ed85f1eac

@hiteshkoshti
Copy link

@godban Have you committed changes in Develop branch ?

@gotbahn
Copy link

gotbahn commented Sep 19, 2015

@hiteshkoshti not me, but yes

@hiteshkoshti
Copy link

@godban I think still changes not committed. I have check develop branch.

capture

@tapantechno2007
Copy link

@godman I think @hiteshkoshti is right. You don't have the patches updated at develop branch it is strange to know that.

I also tried to apply the patches that you did suggest without any luck.

@hiteshkoshti
Copy link

@godban @okorshenko I am still getting symlinks issue when run grunt in windows OS.

@hiteshkoshti
Copy link

@godban @okobchenko Hello all, Is that possible to compile in windows system ? I am waiting your replies.

@rg007
Copy link

rg007 commented Sep 23, 2015

@godban I have mailed you my theme with my fork.
still facing compilation issues in windows but in Linux system it is working well,
this is the issue currently i am facing using develop branch

Execution Time (2015-09-23 09:45:59 UTC)
loading tasks 331ms ██████████ 20%
clean:luma 1.3s ██████████████████████████████████████ 79%
Total 1.7s

Gathering css/styles-m.less sources.

[Magento\Framework\Exception\FileSystemException]

Cannot create a symlink for "E:/wamp/www/magento2/app/design/frontend/Magen

to/blank/web/css/source/_reset.less" and place it to "E:/wamp/www/magento2/

pub/static/frontend/Magento/luma/en_US/css/source/_reset.less" Warning!file

_get_contents(E:\wamp\www\magento2\var\cache\mage-tags\mage---c0e_INTERCEP

TION): failed to open stream: No such file or directory

dev:css:deploy [--locale="..."] [--area="..."] [--theme="..."] type [file1] .
.. [fileN]
Exited with code: 1.
Warning: Task "exec:luma" failed. Use --force to continue.

Aborted due to warnings.

Execution Time (2015-09-23 09:45:58 UTC)
exec:luma 42s ███████████████████████████████████████████████████ 99%
Total 42.4s

@rg007
Copy link

rg007 commented Sep 23, 2015

@gadban i think i finally got the issue in window it is permission access issue for symlink i tried to run as administator then it's working.

One more question, how can i add my custom less file to my theme

@davidalger
Copy link
Member

Should be fixed. Please reopen if issue persists.

@dav1dian
Copy link

@davidalger @godban
Hi guys. issue still exists.. i tried to describe it here #3447

@ghost
Copy link

ghost commented Mar 3, 2016

Issue not fixed. I ran my EE version thinking my repo was old and not updated accurately. Nope, ran the current CE repo and the same issue.
screen shot 2016-03-02 at 7 04 59 pm 2

@alankent
Copy link

alankent commented Mar 3, 2016

Strange. If you look at http://alankent.me/gsd you will find instructions on how to download a prebuilt Docker image. Does that work for you? It is CE 2.0.2 running inside. If that works, it might help spot the difference.

Oh, you are using Client Side compilation I just noticed. A few external developers have said "it is sort of cool, but you would never really use it - use Gulp instead". Using https://github.com/SnowdogApps/magento2-frontools you can get Gulp working with magento 2 - that is working pretty well for me. You might find http://alankent.me/2016/01/27/gulp-et-al-in-magento-2/ interesting as well.

@ghost
Copy link

ghost commented Mar 3, 2016

Hey Alan, will definitely take a look at this. The idea was to run a one-page styleguide pertaining to global elements of the site that I could also parse the less the file and render to strings for quick debug checks rather than looking through the partials to match and LiveReload. I've had success with the method with un-preprocessed CSS using jQuery methods to develop global stylesheets quickly and was looking to expand the usage with LESS. Will definitely look at the links provided, especially the Gulp method on your site and provide feedback to you on that. Thanks for the help!

@huzefahusain
Copy link

Its a permission issue on windows, you try to run it as administrator.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests