使用 Node.js 和 Express 的 Twitter Bootstrap LESS
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9173935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap LESS with Node.js & Express
提问by Patrick
Since Twitter Bootstrap2 is out, I wanted to integrate that into my Node.js project. Unfortunately, there's something wrong with the less compiler and I can't get it to work. I put all files into the public folder and set up a new project with express -c less newproj. and added the lines for less
由于Twitter Bootstrap2 已发布,我想将其集成到我的 Node.js 项目中。不幸的是,less 编译器有问题,我无法让它工作。我将所有文件放入公共文件夹并使用express -c less newproj. 并添加了更少的线条
less = require('less');
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
All Node tells me is:
所有 Node 告诉我的是:
Express server listening on port 3000 in development mode
undefined
On the client side I get a 500 (Internal Server Error) for the bootstrap.css file, which should be compiled by lessc.
在客户端,我收到 bootstrap.css 文件的 500(内部服务器错误),该文件应该由lessc 编译。
lessc bootstrap.less
Works fine.
工作正常。
Anybody knows how to solve the issue?
有谁知道如何解决这个问题?
采纳答案by GoldenBoy
For posterity, this has changed a lot in recent Express:
对于后代,这在最近的 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);
回答by Chris Sainty
Ok, here is what I have found for you. First you need both the compiler and the static middleware. The compiler compiles your less and recompiles on changes, the static middleware does the actual serving of the css
好的,这是我为您找到的。首先,您需要编译器和静态中间件。编译器编译您的 less 并在更改时重新编译,静态中间件执行 css 的实际服务
app.use(express.compiler({ src : __dirname + '/public', enable: ['less']}));
app.use(express.static(__dirname + '/public'));
Second, for some reason when the compiler runs it is losing the current path information, so it can't find the includes. So I had to go through the bootstrap.css and add the path to each import.
其次,由于某种原因,当编译器运行时,它会丢失当前路径信息,因此无法找到包含。所以我不得不通过 bootstrap.css 并为每个导入添加路径。
@import "/public/stylesheets/reset.less";
This is clearly odd, I am going to dig into it further.
这显然很奇怪,我将进一步深入研究。
Edit: While odd, a deep look through the code shows me no simple way around it. A bit more searching found this pull request on the connect repo https://github.com/senchalabs/connect/pull/174which offers a fix for this, but the devs don't seem to want it.
编辑:虽然奇怪,但深入查看代码却发现没有简单的方法可以解决它。更多的搜索在连接存储库https://github.com/senchalabs/connect/pull/174上发现了这个拉取请求,它为此提供了解决方案,但开发人员似乎不想要它。
There are also some workarounds in that thread, but it seems the best idea is to absolute path your includes.
该线程中也有一些解决方法,但似乎最好的主意是包含您的绝对路径。

