使用 Node.js 和 Express 的 Twitter 引导 LESS答案

【问题标题】：Twitter Bootstrap LESS with Node.js & Express使用 Node.js 和 Express 的 Twitter 引导 LESS
【发布时间】：2012-02-07 09:39:49
【问题描述】：

由于Twitter Bootstrap 2 已经发布，我想将它集成到我的 Node.js 项目中。不幸的是，less 编译器有问题，我无法让它工作。我将所有文件放入公共文件夹并使用express -c less newproj 建立一个新项目。并添加了 less 的行

less = require('less');
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));

所有节点告诉我的是：

Express server listening on port 3000 in development mode
undefined

在客户端，我得到 bootstrap.css 文件的 500（内部服务器错误），该文件应该由 lessc 编译。

lessc bootstrap.less

工作正常。

有人知道如何解决这个问题吗？

【问题讨论】：

您还运行了哪些其他中间件？静止的？你知道什么将 undefined 记录到控制台吗？
没有别的了。这是一个全新的项目，我只更改了这两行和 layout.jade 文件。也不知道“未定义”是从哪里来的。

标签： node.js express twitter-bootstrap less

【解决方案1】：

对于后人来说，这在最近的 Express 中发生了很大变化：

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));

// This is just boilerplate you should already have
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);

【讨论】：

好的，我已经安装了less-middleware。我的less文件（styles.less）在/public/stylesheets/styles.less ---我如何获得styles.css？
@barraponto 使用 href='/stylesheets/styles.css' 会自动生成css
参加聚会有点晚了，但实际上我最近创建了一个 npm 模块，以便使用 twitter 引导程序轻松创建一个快速站点。支持所有表达支持的视图引擎，同时也支持LESS。我也计划在不久的将来添加 SASS 和 STYLUS。它叫做 quickstrap，你可以在这里获取它：npmjs.org/package/quickstrap
感谢您展示了放置较少中间件和静态行的位置，我在 app.router 之后将它们放在最后，直到我按照与您的答案相同的顺序进行操作后才起作用.
谢谢，那些静态中间件也需要在app.use(app.router);之前——重要！ :-)

【解决方案2】：

好的，这是我为您找到的。首先，您需要编译器和静态中间件。编译器编译你的 less 并在更改时重新编译，静态中间件执行 css 的实际服务

app.use(express.compiler({ src : __dirname + '/public', enable: ['less']}));  
app.use(express.static(__dirname + '/public'));

其次，由于某种原因，编译器运行时会丢失当前路径信息，因此找不到包含。所以我必须通过 bootstrap.css 并添加每个导入的路径。

@import "/public/stylesheets/reset.less";

这显然很奇怪，我将进一步深入研究。

编辑：虽然很奇怪，但深入查看代码告诉我没有简单的解决方法。更多搜索在连接 repo https://github.com/senchalabs/connect/pull/174 上找到了这个拉取请求，它为此提供了修复，但开发人员似乎并不想要它。

该线程中也有一些解决方法，但似乎最好的想法是绝对路径您的包含。

【讨论】：

请参阅@GoldenBoy 的解决方案以获取有关此问题的更新。你应该使用less-middleware。