CODEWITHSUNDEEP
cssless
Jo Sprague
Jo Sprague

Reputation: 17393

How can I get the right relative paths in my compiled LESS css files?

I'm having a problem with LESS breaking relative URLs in my compiled files. For example, I have;

├── style.less
├── style.css
├── assets
│   ├── img
│   │   └──  bg.png
│   ├── less
│   │   └──  included.less

Style.less imports included.less which has the following line;

body {background: url(../img/wall-texture.png);}

But the output in style.css becomes

body {background: url(assets/less/assets/less/../img/wall-texture.png);}

What's going on here, and how can I fix this so that my paths remain correct after compiling? I realize that perhaps my relative path in included.less needs to be adjusted, and that's fine, but currently, with how less is doubling "assets/less" it makes it extremely convoluted to get the right path while maintaining a reasonable folder structure. Besides that I'm using git submodules to include different LESS projects, so I don't really want to change either the code in the less files or the folder structure, I just want to coerce LESS into compiling correctly. (I've tried all of the Windows compilers I can find, and they all behave the same.)

Any help greatly appreciated!

Upvotes: 12

Views: 5101

Answers (2)

Patrick Hammer
Patrick Hammer

Reputation: 1172

Have a look at https://github.com/marklagendijk/WinLess/issues/12 It seems to be related with exactly the version you are using (1.5.3). I recommend to update to the latest winless build which is already 1.8.0.

There have been several issues with relative paths along the way of winless. But most of them seem to be fixed. See also https://github.com/marklagendijk/WinLess/issues/search?q=path

Please note that the default behavior of the less compiler is actual to retain the relative path as you would expect.

Upvotes: 1

ScottS
ScottS

Reputation: 72261

There may well be a solution that resolves your compiling. If not, one possible solution (which does require you to change your LESS files) is to interpolate the path. That way, the compiler might leave it alone as far as appending to it:

body {background: url(~"../img/wall-texture.png");}

Upvotes: 2

Related Questions