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，其中包含许多其他较少的文件。但是，我们不会遇到这个问题。我认为有几种方法 - 你可以改变静态文件的位置。

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只包含所有较少的文件，我们的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压缩成一个文件太糟糕了 - 它是第一次下载然后完全缓存。

希望这有用。

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

1 个答案: