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