如何使用django-compressor和多个导入公共文件的LESS文件？

Question

我在Django项目中组织了模板,使得网站上的每个页面都包含一个"公共"LESS文件,每个页面还可以指定另一个包含页面特定样式的LESS文件.

问题是我需要特定于页面的LESS文件才能引用"common"LESS文件中的变量.我认为,最简单的方法是将变量声明移动到LESS文件可以的单独文件中@import.

但是,Django应用程序使用单独的目录来存储其静态文件.最后,文件系统看起来像这样:

- common
   - static
      - css
         - definitions.less
         - common.less
- other
   - static
      - css
         - other.less

双方common.less并other.less需要进口definitions.less.在这种情况下,common.less这很简单:

@import "definitions.less";

以下是LESS文件实际包含在页面中的方式,以防有助于:

{% load compress %}
{% load static %}

{% compress css %}
    <link href="{% static "css/common.less" %}"
          rel="stylesheet" type="text/less">
{% endcompress %}

什么是最简单的方法来确保两个LESS文件都可以使用公共变量定义？我想避免组合LESS文件有以下几个原因:

• 它消除了松散耦合的好处(能够停用应用程序,而不会对站点的其余部分产生任何副作用).
• 由于必须获取所有应用程序的所有样式,因此增加了为单个页面检索的其他数据.

Answer 1

我们在应用程序中做了同样的事情——我们有一个公共文件 main.less，许多其他 less 文件都包含该文件。但是，我们没有遇到这个问题。我认为有几种方法可以解决这个问题——您可以更改静态文件的位置。

django STATICFILES_DIRS 中有一个设置 - 如果您愿意，您似乎可以更改静态文件的位置，而不是嵌套在这样的应用程序中。 https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-STATICFILES_DIRS

我们的代码看起来像这样

{% compress css %}
{% include "_base_css.html" %}
{% endcompress %}

然后 _base_css.html 只包含所有 less 文件，首先是我们的 main.less 文件。

## _base_css.html
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/main.less">
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/about.less">
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/dashboard.less">

从您的问题中我不清楚错误是什么，但我相信您的常见较少文件需要先包含在任何其他较少文件可访问之前。在您的代码片段中，您似乎没有包含该内容。在压缩方面，我不认为将所有站点范围的 css 压缩到一个文件中太糟糕——这是第一次下载，然后完全缓存。

希望这有帮助。