如何使用 Less CSS 将项目部署到 Heroku？答案

【问题标题】：How do you deploy a project using Less CSS to Heroku?如何使用 Less CSS 将项目部署到 Heroku？
【发布时间】：2011-12-28 10:17:58
【问题描述】：

在本地开发中，我的 Django 站点使用较少的 CSS。一切看起来都很好。我包含的文件如下：

<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>

但是，当我将项目部署到 Heroku 时，Less CSS 莫名其妙地不起作用。我有什么问题？

我知道我已经正确设置了静态媒体：我可以从正确的路径下载 base.less 和 less-1.1.3.min.js。

注意：我意识到最好编译和缩小我的 .less 文件以用于生产，但这只是用于开发目的的暂存服务器。

注意 2：如果您知道如何将 Less CSS 编译添加到 Heroku 部署过程中，而无需安装 node.js，除了我的主要问题之外，我还有兴趣了解如何做到这一点..

【问题讨论】：

解析后的 url 在 heroku（打开页面并查看源代码）中看起来如何？你提到的有效的“正确路径”是什么？
看起来像这样。如果我打开任一 URL，则 2 个文件加载正常。（为了隐私而更改了名称） s3.amazonaws.com/mysitehere/less/base.less">

标签： css django deployment heroku less

【解决方案1】：

问题在于 less.js 通过 XHR 加载 .less 样式表，除非您设置适当的 Access-Control-Allow-Origin 标头，否则它将不起作用，而 S3 不允许这样做 (https://forums. aws.amazon.com/thread.jspa?threadID=34281)。

作为一种解决方法，有些人建议设置一个 HTTP 代理，它会添加必要的标头。 (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) 和 (http://zefer.posterous.com/pure-html-ajax-solutions-to -upload-files-to-s)

否则，您将不得不将 .less 文件编译为 CSS，因为 less.js 无法正常工作。

当然，另一种选择（我使用）是将静态文件简单地部署到 Apache 服务器，而不是将它们托管在 S3 中。

【讨论】：

【解决方案2】：

看看https://github.com/nigma/heroku-django-cookbook

它利用heroku-buildpack-python提供的post_compile钩子来安装nodejs和lessc。

【讨论】：