web-dev-qa-db-ja.com

Twitter Bootstrap LESS with Node.js＆Express

Twitter Bootstrap 2がリリースされたので、それをNode.jsプロジェクトに統合したいと考えました。残念ながら、lessコンパイラーには何か問題があり、動作させることができません。すべてのファイルをパブリックフォルダーに入れ、express -c less newprojを使用して新しいプロジェクトを設定します。少ない行を追加しました

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

すべてNodeは、

Express server listening on port 3000 in development mode
undefined

クライアント側では、bootstrap.cssファイルに対して500（内部サーバーエラー）が発生します。これはlesscでコンパイルする必要があります。

lessc bootstrap.less

正常に動作します。

誰かが問題を解決する方法を知っていますか？

node.jsexpresstwitter-bootstrapless
23
Patrick

後世のために、これは最近の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);
19
GoldenBoy

わかりました、これが私があなたのために見つけたものです。まず、コンパイラと静的ミドルウェアの両方が必要です。コンパイラはあなたの少ないものをコンパイルし、変更時に再コンパイルします、静的ミドルウェアはCSSの実際のサービングを行います

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

第2に、何らかの理由でコンパイラーが実行されると、現在のパス情報が失われるため、インクルードを見つけることができません。そのため、bootstrap.cssを確認して、各インポートにパスを追加する必要がありました。

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

これは明らかに奇妙です。さらに掘り下げます。

編集：奇妙なことですが、コードを深く見ると、コードを回避する簡単な方法がわかりません。もう少し検索すると、このプルリクエストが接続リポジトリで見つかりました https://github.com/senchalabs/connect/pull/174 これは修正を提供しますが、開発者は望んでいないようですそれ。

そのスレッドにはいくつかの回避策もありますが、インクルードの絶対パスを使用するのが最善のようです。

11
Chris Sainty