Question

我们打算扩展openstack的Horizon，这是一个Django应用程序。第一个目标：添加一些自定义CSS。我们的方法是创建一个自己的Django项目，并在settings.py中导入Horizon的默认设置（＆＃34;来自openstack_dashboard.settings import *＆＃34;）。在导入之后，我们通过在原始Horizon目录之前添加自定义模板目录来扩展TEMPLATE_DIRS。模板目录是BASE_DIR / templates。它是文件_stylesheets.html。

这种方法在调试/开发模式下运行良好（Django提供正确的模板和CSS）。但是当我们关闭调试模式部署应用程序时，我们的自定义CSS代码未正确包含。有趣的是，Django实际上生成了两个CSS文件：一个包含部分，一个没有我们的添加。它包含了一部分自定义CSS类。

以下是模板的内容：

{% load compress %}

{% compress css %}
<link href='{{ STATIC_URL }}bootstrap/less/bootstrap.less' type='text/less' media='screen' rel='stylesheet' />
<link href='{{ STATIC_URL }}bootstrap/less/datepicker.less' type='text/less' media='screen' rel='stylesheet' />
<link href='{{ STATIC_URL }}dashboard/less/rickshaw.css' type='text/css' media='screen' rel='stylesheet' />
<link href='{{ STATIC_URL }}dashboard/less/horizon_charts.less' type='text/less' media='screen' rel='stylesheet' />
<link href='{{ STATIC_URL }}dashboard/less/horizon_workflow.less' type='text/less' media='screen' rel='stylesheet' />
<link href='{{ STATIC_URL }}custom.less' type='text/less' media='screen' rel='stylesheet' />
{% endcompress %}

<link rel="shortcut icon" href="{{ STATIC_URL }}dashboard/img/favicon.ico"/>

在开发模式下，文件每个都转换为CSS：

<link media="screen" type="text/css" href="/static/dashboard/css/bootstrap.699284425211.css" rel="stylesheet">
<link media="screen" type="text/css" href="/static/dashboard/css/datepicker.39a8e5b9c87f.css" rel="stylesheet">
<link rel="stylesheet" media="screen" type="text/css" href="/static/dashboard/less/rickshaw.css">
<link media="screen" type="text/css" href="/static/dashboard/css/horizon_charts.985669de17ce.css" rel="stylesheet">
<link media="screen" type="text/css" href="/static/dashboard/css/horizon_workflow.aa358dadad47.css" rel="stylesheet">
<link media="screen" type="text/css" href="/static/dashboard/css/custom.f2648785ac78.css" rel="stylesheet">`

在生产中，它看起来如下（在manage.py collectstatic和compress之后）：

<link media="screen" type="text/css" href="/static/dashboard/css/571c5f6c29ad.css" rel="stylesheet">

~~但它应该包括6176ec592868.css。~~ 请参阅编辑1。所有可用的css文件：

# find generated/static/ -name "*.css"
generated/static/dashboard/less/rickshaw.css
generated/static/dashboard/css/571c5f6c29ad.css
generated/static/dashboard/css/6176ec592868.css
generated/static/horizon/lib/jasmine-1.3.1/jasmine.css
generated/static/horizon/lib/qunit/qunit.css

我们已经检查过INSTALLED_APP和TEMPLATE_DIRS顺序是正确的（我们的东西是第一位的）。我们陷入了困境 - 你有什么想法可以在下一步看看吗？

编辑1：我刚注意到，6176ec592868.css实际上只包含旧的CSS内容，而571c5f6c29ad.css似乎是我们修改的不完整的CSS文件。所以问题略有不同：为什么会在开发模式下将所有内容正确转换为.css，但是＆＃34; manage.py compress＆＃34;反过来不能正确收集所有较少的文件？

Answer 1

默认情况下，

horizon使用lesscpy（python）而不是lessc（javascript）。显然，lesscpy不喜欢我们较少的代码。

所以我们改变了这个：

COMPRESS_PRECOMPILERS = (
    ('text/less', 'lesscpy {infile}'),
)

对此：

COMPRESS_PRECOMPILERS = (
    ('text/less', 'lessc {infile} {outfile}'),
)

lessc更喜欢我们更少的代码并且它有效！

Django包含错误的生成/压缩CSS文件

1 个答案: