Relative Path issue with less.js

[reggi]

Here's my directory structure

assets/
    components/
        bootstrap/
    stylesheets/
        bootstrap.less
        style.less

bootstrap.less looks like this

// CSS Reset
@import "../components/bootstrap/less/reset.less";

// Core variables and mixins
@import "../components/bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../components/bootstrap/less/mixins.less";

It @imports each piece of bootstrap from the components folder. It's using relative the relative url with ../ to jump out of the current directory followed by components/ to go into components.

The style.less file contains something like this.

@import "./bootstrap.less";

Which @imports this sibling file boostrap.less.

For some reason all of this isn't playing nicely with less.js

Couldn't load http://reggi.dev/reggi.com/assets/stylesheets/components/bootstrap/less/reset.less (404)
in bootstrap.less 
at http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:2505
at a (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:3512)
at x (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:3887)
at w (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:1890)
at Function.r.Parser.importer (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:22700)
at Object.m.imports.push (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:9804)
at Object.e.Import (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:9:6274)
at Object.p.parsers.import (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:19029)
at E (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:8091)
at Object.p.parsers.directive (http://reggi.dev/reggi.com/assets/components/less.js/dist/less-1.3.3.min.js:8:19845)

The path:

http://reggi.dev/reggi.com/assets/stylesheets/components/bootstrap/less/reset.less

Should be

http://reggi.dev/reggi.com/assets/components/bootstrap/less/reset.less

---

I found this ticket that has SalimBensiali's less.js which didn't cause this error.

The problem with his version is that it's 1.3.0 which apparently doesn't support this which is in bootstrap:

.span@{index} { .span(@index); }

[lukeapage]

yes that was introduced in 1.3.1

I suspect the above will work if you compile serverside with node, which is recommended, but it is still a bug.

[Piedone]

I have a very similar issue, possibly the same one with 1.4.0b.

I have the following directory structure:

Theme:
    - Content
        - other.less
    - Styles
         - style.less

Style.less contains the following:

@import "../Content/other";

This correctly resolves with 1.3.3 but with 1.4.0b I get the following error (using in Visual Studio through ASP.NET and Web Tools 2012.2):

"Error LESS: 'd:/Users\Projects../Content/other.less' wasn't found (404) d:\Users\Projects\style.less"

Notice how the relative path is not resolved and that forward and backward slashes are used mixed up.

Possibly related? #1272

[losnir]

@Piedone I tried to reproduce the issue you're having, and I got the following error:

'undefinedcontent/other.less' wasn't found (404) (Line: 1)

I can confirm that applying my fix #1278, solves the problem.

How are you invoking the compiler? Can you try the method I described in the op of #1272 ?

[Piedone]

Well it seems the issue lies within how the parser was invoked by ASP.NET and Web Tools indeed and when I fixed that I didn't even have problems with the default 1.4.0b! I apologize for the confusion, it seems this is not an issue with less.js. See the description of the rather strange issue here: http://forums.asp.net/p/1900852/5371528.aspx/1?p=True&t=635022256782196589

[losnir]

That is weird, are you sure this fixes the problem? Do you know what's the value of input?

[Piedone]

I know it's weird :-). Yes, I've no problems so far.
The value most possibly contains the file name (just the file name, not the full path) of the less file to be parsed. However the full path should be passed to the parser somehow but I haven't investigated it.
Long story short, it seems to have nothing to do with less.js itself.

[lukeapage]

closing since the pull request was merged, think that resolves the issues here

[losnir]

I'm not sure. My pull request fixed an issue with "undefined" added to the start of the url. This is a different, but somehow related issue.

I think this for loop is responsible for the issue:

https://github.com/cloudhead/less.js/blob/master/lib/less/browser.js#L227

[lukeapage]

@reggi The problem is that it doesn't recognise ./ as being the current directory. So ../ is escaping ./ even though that is the current directory. changing @import "./bootstrap.less" to @import "bootstrap.less" stops the issue occuring.

[ghost]

Unfortunately, relative paths are still a problem in LESS and the bug has not been solved (see above issues). Are there any plans to work on this?

[seven-phases-max]

@4DiGITS The issues crosslinked above are not related to this one actually. In short the problem is: "url()s in a less file imported from another directory are relative to the path of the master less file". And this is actually expected result. The --relative-urls/relativeUrls option should be used in this case. Probably we should create a dedicated issue with detailed description and correct solutions/recommendations since the number of related issues within Font-Awesome and Bootstrap is piling up recently and they have already pushed somewhat "incorrect" (or at least "flawed") workarounds (see twbs/bootstrap#10941, FortAwesome/Font-Awesome#3138, #1821 (comment)).

[JaKXz]

Is there any way to pass in the relativeUrls option to the less.render method in the node API? found the answer in #2524.