LESS compiler - wrong url in output

[RaptorCZ]

Hello,

I found nasty bug or strange thing. Using imports my css output gets wrong url paths.

I have nested file with definition

@font-face
{
    font-family: "DejaVu Sans";
    src: url('fonts/DejaVu/DejaVuSans.eot');
    src: url('fonts/DejaVu/DejaVuSans.eot?#iefix') format('embedded-opentype'), 
         url('fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

Try to compile file MAIN.less. It produces

@font-face {
  font-family: "DejaVu Sans";
  src: url('fonts/DejaVu/fonts/DejaVu/DejaVuSans.eot');
  src: url('fonts/DejaVu/fonts/DejaVu/DejaVuSans.eot?#iefix') format('embedded-opentype'), url('fonts/DejaVu/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

Using WebEssentials 2.5.4

Seems that node.js version of less works fine

C:\Develope\Projects\TEMP\LessTest\LessTest\styles>call C:\Users\rene.spisak\AppData\Roaming\npm\lessc.cmd "MAIN.less"
@font-face {
  font-family: "DejaVu Sans";
  src: url('fonts/DejaVu/DejaVuSans.eot');
  src: url('fonts/DejaVu/DejaVuSans.eot?#iefix') format('embedded-opentype'), url('fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

Sample: http://raptor.cestiny.cz/Temp/styles.zip

[am11]

To me, this is a known bug. I have a fix for it (https://github.com/less/less.js/issues/2310#issuecomment-64492138), but couldn't run WE's test suite, due to the long path build issue in WE2013's current master. :(

In any case, you can do some hacking 101 and manually edit the file services/srv-less.js accordingly with that fix. :)

Note: once you change any services/srv-*.js file while VS was running (and you were already using that service), you would need to either restart VS or just node. To do that, you can either use task manager or in powershell run: stop-process -name node. It will shut down all node processes. Next attempt to save will spawn a new node.exe.

[RaptorCZ]

Checked services/srv-less.js but it seems that code from your suggestion is already here. So this is another problem.

[am11]

I tested with Less npm, seems like the result is same:

# unzipped your achieve
cd styles\styles

npm install less

node_modules\.bin\lessc.cmd -v

# outputs:
lessc 2.5.1 (Less Compiler) [JavaScript]

node_modules\.bin\lessc.cmd MAIN.less

# outputs:
@font-face {
  font-family: "DejaVu Sans";
  src: url('fonts/DejaVu/fonts/DejaVu/DejaVuSans.eot');
  src: url('fonts/DejaVu/fonts/DejaVu/DejaVuSans.eot?#iefix') format('embedded-opentype'), url('fonts/DejaVu/fonts/DejaV
u/DejaVuSans.ttf') format('truetype');
}
body {
  color: green;
}
/*# sourceMappingURL=MAIN.css.map */

[am11]

This is strange. I ran the command multiple times and now it is showing me correct paths i.e. fonts/DejaVu/DejaVuSans.eot. Testing with WE now..

[am11]

This is fixed by #1893. After some experimentation, I come to realize that it is better if we don't use relativePath option of Less compiler. When it is enabled, it messes up with paths. There might be a right way of configuring it, but with so many moving parts, it will break someone's use-case in Web Essentials. So Less option is purged. Secondly, I have added Adjust Relative Paths option in WE settings. What it does is, if you use Custom output directory and Tools > Web Essentials > [Le/Sa]ss > Adjust Relative Paths is true, it will perform the replacement throughout the output and resolve relative paths for all url(s. This fixes your issue.