我的LESS @import路徑應該是什么?

[英]What should my LESS @import path be?

Here's the scenario:


I'm running Django 1.3.1, utilizing staticfiles, and django-compressor (latest stable) to, among other things, compile LESS files.

我正在運行Django 1.3.1,利用靜態文件和django-compressor(最新穩定版)來編譯LESS文件。

I have an "assets" directory that's hooked into staticfiles with STATICFILES_DIRS (for project-wide static resources). In that directory I have a "css" directory and in that a "lib.less" file that contains LESS variables and mixins.


So the physical path is <project_root>/assets/css/lib.less and it's served at /static/css/lib.less.

所以物理路徑是 /assets/css/lib.less,它在/static/css/lib.less中提供。

In one of my apps' static directory, I have another LESS file that needs to import the one above. The physical path for that is <project_root>/myapp/static/myapp/css/file.less and it would be served at /static/myapp/css/file.less.

在我的一個應用程序的靜態目錄中,我有另一個LESS文件,需要導入上面的那個。其物理路徑是 /myapp/static/myapp/css/file.less,它將在/static/myapp/css/file.less中提供。

My first thought was:


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

(i.e. based on the URL, go up to levels from /static/myapp/css to /static/, then traverse down into /static/css/lib.less).

(即基於URL,從/ static / myapp / css升級到/ static /,然后遍歷到/static/css/lib.less)。

However, that doesn't work, and I've tried just about every combination of URLs and physical paths I can think of and all of them give me FilterErrors in the template, resulting from not being able to find the file to import.


Anyone have any ideas what the actual import path should be?


2 个解决方案



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:

事實證明,它希望從物理文件系統路徑導入從源文件到文件的相對路徑。所以我不得不一直回到我的 ,然后從那里引用assets / css / lib.less。最終工作的實際導入是:

@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/.

當我最終將我的代碼推送到我的臨時環境並運行collectstatic時,有一個完整的“DUH”時刻。我正在使用的@import路徑在開發中運行良好,因為那是文件的物理路徑,但是一旦collectstatic完成了它的事情,一切都被移動並相對於 / 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.

所以......我在 / assets / css /下分解並移動了所有LESS文件,並合理化了將LESS文件移出應用程序,因為它們與項目級文件綁定以便運行,他們本身就是項目級別的。



I'm sort of in the same bind and this is what I've come up with for the most recent versions of compressor and lessc to integrate with staticfiles. Hopefully this will help some other people out


As far as I can tell from experimenting, lessc doesn't have a notion of absolute or relative paths. Rather, it seems to maintain a search path, which includes the current directory, the containing directory of the less file, and whatever you pass to it via --include-path


so in my configuration for compressor I put


    ('text/less', 'lessc --include-path=%s {infile} {outfile}' % STATIC_ROOT),

Say, after running collectstatic I have bootstrap living at



Then from any less file, I can now write


@import (less, reference) "/bootstrap/3.2.0/bootstrap.css"

which allows me to use the bootstrap classes as less mixins in any of my less files!

這允許我在任何較少的文件中使用bootstrap類作為less mixins!

Every time I update a less file, I have to run collectstatic to aggregate them in a local directory so that compressor can give less the right source files to work on. Otherwise, compressor handles everything smoothly. You can also use collectstatic -l to symlink, which means you only need to collect the files when you add a new one.

每次我更新一個less文件時,我都必須運行collectstatic將它們聚合在一個本地目錄中,以便壓縮器可以減少正確的源文件。否則,壓縮機可以順利處理一切您還可以將collectstatic -l用於符號鏈接,這意味着您只需在添加新文件時收集文件。

I'm considering implementing a management command to smooth out the development process that either subclasses runserver to call collectstatic each time the server is reloaded, or uses django.utils.autoreload directly to call collectstatic when things are updated.


Edit (2014/12/01): My approach as outlined above requires a local static root. I was using remote storage with offline compression in my production environment, so deployment requires a couple extra steps. In addition to calling collectstatic to sync the static files to the remote storage, I call collectstatic with different django config file that uses local storage. After I have collected the files locally, I can call 'compress', having configured it to upload the result files to remote storage, but look in local storage for source files.




粤ICP备14056181号  © 2014-2021 ITdaan.com