css - 如何将 django-compressor 与导入通用文件的多个 LESS 文件一起使用？

Question

我在我的 Django 元素中组织模板的方式是网站上的每个页面都包含一个“通用”LESS 文件，每个页面还可以指定另一个包含页面特定样式的 LESS 文件。

问题是我需要页面特定的 LESS 文件才能引用“通用”LESS 文件中的变量。我认为，最简单的方法是将变量声明简单地移动到一个单独的文件中，两个 LESS 文件都可以 @import。

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

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

Both common.less and other.less need to import definitions.less. In the case of common.less this is as simple as:

@import "definitions.less";

以下是 LESS 文件实际包含在页面上的方式，以防万一:

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

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

确保公共(public)变量定义对两个 LESS 文件可用的最简单方法是什么？出于以下几个原因，我想避免合并 LESS 文件:

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

Answer 1

我们在我们的应用程序中做同样的事情——我们有一个公共(public)文件 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">

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

希望这对您有所帮助。