duncansmart/LessCoffee

data-uri function in LESS not resolving to correct file location

Closed this issue · 6 comments

Tried using the LESS 1.4.0 function data-uri() and got this error:

/* ERROR: Error 2 in 'D:\Projects\Project\src\Web\Styles\global\article.less':
RuntimeError: error evaluating function data-uri: ENOENT, no such file or directory 'D:\ui\category.png' in - on line 59, column 29:
58 .categories {
59 background: data-uri('/ui/category.png') no-repeat left 0.4em;
60 padding-left: 1.25em; */

The parser should be using the project root folder as the folder to base relative URLs on.

Would this be solved by adding the --rootpath=URL flag in LessCssHandler.cs?

Looks like the issue is the fact that your path isn't relative - you have an initial / in the path /ui/category.png - remove that and it should work.

It's relative to the root of the website, if I remove the first slash it
will point to the wrong place... I shouldn't have to rewrite urls in my css
that work otherwise just for the less files to compile properly. That kind
of defeats the purpose :-)
On Nov 1, 2013 7:46 PM, "Duncan Smart" notifications@github.com wrote:

Looks like the issue is the fact that your path isn't relative - you have
an initial / in the path /ui/category.png - remove that and it should
work.


Reply to this email directly or view it on GitHubhttps://github.com//issues/6#issuecomment-27590511
.

I see. I never assume a web app is going to be installed in the root of a site so always make everything relative to the file. See if --rootpath works.

Just looked into this. The --rootpath option is designed to be a URL for a CDN.

Looking at the tests for data-uri() in https://github.com/less/less.js/blob/master/test/less/urls.less it appears they use relative paths also.

I've been testing this with the updated version of the project without getting it to work with the root-relative paths. I see that LESS does not have any tests for root-relative paths, either. Perhaps I need to file a bug about that there?

I can understand why they don't have any tests for it, since they can't know where their project will be deployed on a domain, but it's often used on regular sites where you have control over the URL structure and your image resources are in a specific folder.

Much easier to write "/ui/image.png" in your CSS rather than "../../../ui/image.png" depending on how deep your CSS file is into the directory structure.