Less CSS, @Import Path from Variable

Use variables in LESS import statements

See Variables > Variable Interpolation > Import statements in the documentation.

The proper syntax is:

@path: "../modules/core/less/";

@import "@{path}file.less";

LESS CSS, @import path from variable

FWIW this is a bug in less.js that’s been discussed for way over a year now. There are at least two attempts to fix this but one requires large changes to the public API and has consequently been rejected. The other approach only works partially.

On the other hand, lessphp supports this without problem now; I have no idea whether dotless does.

Using variables in import directive for LESS

This isn't a direct answer to your question, but LESS imports are always relative to the current file, so it's not possible to import from another domain.

What should my LESS @import path be?

After tracking down exactly where the error was coming from in the django-compressor source. It turns out to be directly passed from the shell. Which clued me into removing all the variables and literally just trying to get the lessc compiler to parse the file.

Turns out it wants a relative path from the source file to the file to be imported in terms of the physical filesystem path. So I had to back all the way out to my <project_root> and then reference assets/css/lib.less from there. The actual import that finally worked was:

@import "../../../../assets/css/lib.less"

What's very odd though is that lessc would not accept an absolute filesystem path (i.e. /path/to/project/assets/css/lib.less). I'm not sure why.

UPDATE (02/08/2012)

Had a complete "DUH" moment when I finally pushed my code to my staging environment and ran collectstatic. The @import path I was using worked fine in development because that was the physical path to the file then, but once collectstatic has done it's thing, everything is moved around and relative to <project_root>/static/.

I toyed with the idea of using symbolic links to try to match up the pre and post-collectstatic @import paths, but I decided that that was far too complicated and fragile in the long run.

SO... I broke down and moved all the LESS files together under <project_root>/assets/css/, and rationalized moving the LESS files out of the apps because since they're tied to a project-level file in order to function, they're inherently project-level themselves.

Can't get dotLESS @import working

Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.