Twitter Bootstrap LESS with Node.js & Express

你说的曾经没有我的故事 提交于 2019-11-28 19:58:47

问题


Since Twitter Bootstrap 2 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

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

All Node tells me is:

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.

lessc bootstrap.less

Works fine.

Anybody knows how to solve the issue?


回答1:


For posterity, this has changed a lot in recent 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);



回答2:


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

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.

@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/174 which offers a fix for this, but the devs don't seem to want it.

There are also some workarounds in that thread, but it seems the best idea is to absolute path your includes.



来源:https://stackoverflow.com/questions/9173935/twitter-bootstrap-less-with-node-js-express

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!