Less client side compilation problem.

[tapansoda]

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]

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

[godban]

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]

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]

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

[godban]

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

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.

[godban]

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

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

[godban]

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

[tapantechno2007]

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

[tapantechno2007]

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

[godban]

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

[tapantechno2007]

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

[tapantechno2007]

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]

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.

[godban]

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

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

[hiteshkoshti]

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.

[godban]

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]

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

[godban]

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]

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.

[godban]

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

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

[tapantechno2007]

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]

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

[tapantechno2007]

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

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

[godban]

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

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

[godban]

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

@godban Have you committed changes in Develop branch ?

[godban]

@hiteshkoshti not me, but yes

[hiteshkoshti]

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

[tapantechno2007]

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

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

[hiteshkoshti]

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

[rg007]

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

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

Should be fixed. Please reopen if issue persists.

[dav1dian]

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

[ghost]

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.

[alankent]

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]

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]

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