16

モジュール「less」と「less-middleware」を試しました。すべてのチュートリアルで見つけたさまざまなコード スニペットをすべて試しました。利用可能なドキュメントはありません。誰かが Express.js と Less を構成して、less が適切にプリコンパイルされるようにする方法を説明できますか?!

次の質問をガイドラインとして使用してください。

  1. 「less」モジュールと「less-middleware」モジュールのどちらを使用しますか? 公式/サポートされている方法は何ですか? 何が優れていますか？
  2. あなたのディレクトリ構造は/publicどのように見えるべきですか? (必要な特定のフォルダーはありますか? 'styles'/'less'/'css'? またはそれは自分次第ですか?)
  3. ディレクトリ構造に関するExpress アプリの構成方法(質問 2 から)。(静的ファイルとコンパイラ オプションまたは少ないミドルウェア、ここで重要なディレクトリ)
  4. HTML からコンパイル済みのスタイルシートを参照するにはどうすればよいですか? (.less または .css を使用? 参照タイプは? ディレクトリパスは?)

誰かがそれに答えることができればとてもいいでしょう:-)

4

3 に答える 3

12

このソリューションは、express 2.x でのみ機能します。

私は解決策を見つけました、これはうまくいけば誰かを助けるでしょう:

1. 少ないまたは少ないミドルウェア

私はそれが公式の移植版であると読んだので、あまり使用していません。しかし、利用可能なドキュメントがないため、違いが何であるかはわかりません。

2. ディレクトリ構造:

ディレクトリ構造はそれほど重要ではありません。ただし、JavaScript、Less、CSS、または画像ファイルなどのすべての静的コンテンツを提供するパブリック フォルダーを用意することを強くお勧めします。

3. アプリの構成:

適切に機能しないようにするには、次の 2 つの特定のことが必要です。

まず、少ないファイルをコンパイルするコンパイラ:

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

次に、静的ファイルの場所を明示的に表示します。

    app.use(express.static(__dirname + '/public'));

どちらもパブリック フォルダーを指している必要があります。

4.html

    <link rel="stylesheet" href="/styles/bootstrap.css">

パブリック フォルダーのどこかにあるルートのないファイルを直接指定します。

5. 少ないファイル

この答えのおかげで、私はいつも何がうまくいかなかったのかを知っています。less.js には一種のバグがあります。ルート ファイルにインポートするより少ないファイルをすべて検出するわけではありません。したがって、すべてのインポートに正しいパスを追加する必要があります!!!

あなたが持っているすべてのインポートを置き換え @import "reset.less"; て ください！@import "/public/styles/reset.less";

ほら... :-)

この問題に協力してくれたすべての人に感謝します。Wes Johnson の answere もご覧ください。彼は、どういうわけか私にはうまくいかなかった非常に素晴らしい解決策を持っていると思います...

于 2012-06-12T08:55:59.230 に答える
4

この回答ごとに（私も取り組んでいます）。最初にapp.js、

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次に、拡張子を に変更する以外は、ファイルへのリンクを含めるだけcssです。このような、

<link rel="stylesheet" href="components/bootstrap/less/bootstrap.css" />

components/bootstrap/less/bootstrap.lessそして、それはcssにコンパイルされ、クライアントに提供されます。

自動的に縮小するなどのクールなことを行う方法の詳細については、ドキュメントをless-middleware参照してください。

于 2013-04-19T09:10:53.090 に答える
2

私はこれまでミドルウェアをあまり使用していませんが、それがほとんどのアプリケーションにどれほど関連しているかはわかりません。ほとんどの場合、おそらく事前にコンパイルする必要があります。つまり、Nodeを起動するときです。これと同じくらい簡単かもしれません：

var fs      = require('fs'),
    less    = require('less');

fs.readFile('styles.less', function(err,styles) {
    if(err) return console.error('Could not open file: %s',err);
    less.render(styles.toString(), function(er,css) {
        if(er) return console.error(er);
        fs.writeFile('styles.css', css, function(e) {
            if(e) return console.error(e);
            console.log('Compiled CSS');
        });
    });
});

ディレクトリ構造は完全にあなたの好みです。express.staticコンパイルされたCSSファイルを提供するのに利用します。

于 2012-06-08T18:49:02.237 に答える