5

我在我的 Django 项目中组织了模板，使得站点上的每个页面都包含一个“通用”LESS 文件，并且每个页面还可以指定另一个包含页面特定样式的 LESS 文件。

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

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

- 常见的
   - 静止的
      -CSS
         - 定义.less
         - common.less
- 其他
   - 静止的
      -CSS
         - 其他.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 文件有几个原因：

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

1 回答 1

0

我们在我们的应用程序中做同样的事情——我们有一个公共文件 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 压缩到一个文件中太糟糕了——它是第一次下载，然后被完全缓存。

希望这会有所帮助。

于 2014-02-15T10:43:36.153 回答