Twitter Bootstrap LESS与Node.js和Express的集成

Question

自从Twitter Bootstrap 2发布后，我想将其整合到我的Node.js项目中。但不幸的是，less编译器出了一些问题，我无法让它正常工作。我将所有文件放入public文件夹中，并使用express -c less newproj设置了一个新项目并添加了less相关的代码。

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

Node只告诉我：

Express server listening on port 3000 in development mode
undefined

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

lessc bootstrap.less

运行正常。

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

- Patrick

---

你还运行了哪些中间件？是静态的吗？你知道是什么将未定义的内容记录到控制台吗？ - Chris Sainty

这是一个全新的项目，我只更改了那两行代码和layout.jade文件。我也不知道"undefined"是从哪里来的。 - Patrick

Answer 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);

- GoldenBoy

---

好的，我已经安装了less-middleware。我的less文件（styles.less）在/public/stylesheets/styles.less --- 我该如何得到styles.css？ - Capi Etheriel

@barraponto 使用 href='/stylesheets/styles.css'，CSS 将自动生成。 - tofutim

我有点晚了，但最近我创建了一个npm模块，可以轻松地使用Twitter Bootstrap创建一个express网站。支持express支持的所有视图引擎，并且还支持LESS。我计划在不久的将来添加SASS和STYLUS支持。它被称为quickstrap，您可以在此处获取：https://npmjs.org/package/quickstrap - BFree

谢谢您指出应该放置 less-middleware 和 static 的位置，我将它们放在了 app.router 后面，但是直到我按照您的答案顺序进行调整才成功。 - Dan Ross

谢谢，那些静态中间件也需要在app.use(app.router);之前放置 - 这很重要! :-) - Azat

Answer 2

好的，这是我为您找到的内容。 首先，您需要安装编译器和静态中间件。编译器编译您的Less，并在更改时重新编译，静态中间件实际提供css服务。

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

其次，由于某种原因，编译器在运行时会丢失当前路径信息，所以它找不到包含文件。因此我不得不逐个导入文件中的路径来解决这个问题。

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

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

编辑：虽然很奇怪，但对代码进行深入检查后，没有找到简单的解决方法。 经过更多搜索，在connect存储库 https://github.com/senchalabs/connect/pull/174 中找到了一个修复此问题的拉取请求，但开发人员似乎不想要它。

该线程中还有一些解决方法，但似乎最好的想法是使用绝对路径来包含文件。

- Chris Sainty

---

请参考@GoldenBoy的解决方案以获取更新。您应该使用less-middleware。 - tofutim