1

Express のサーバー側で LESS のコンパイルをセットアップしましたが、レイアウトにあまり配置せずに jade で正しく機能しました。

私の端末：

if(err) throw err;
                ^
Error: ENOENT, open '/Users/lijung/Documents/Project/clubond/public/stylesheets/left_navigator.less'

app.js:

/**
 * Module dependencies.
 */

var express = require('express')
    , path = require('path')
    , club = require('./routes/club')
    , less = require('less')
    , fs = require('fs');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
    var RedisStore = require('connect-redis')(express);
    app.use(express.cookieParser());
    app.use(express.session({ secret: "william", store: new RedisStore }));
    app.use(express.logger());
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.set('view options', { layout: false });
    app.use(express.static(path.join(__dirname, 'public')));
});


app.configure('development', function(){
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
    app.use(express.errorHandler()); 
});

// Routes
//index-in-layout
app.get('/club/:id', club.chkExist, club.getDataById, site.clubPage);

//compile less
app.get("*.less", function(req, res) {
    var path = __dirname + req.url;
    fs.readFile(path, "utf8", function(err, data) {
        if(err) throw err;
        less.render(data, function(err, css) {
    if (err) throw err;
        res.header("Content-type", "text/css");
        res.send(css);
     });
   });
}); 


app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

index_in_layoutという名前のビューにレイアウトを配置しました。

!!! 5
html
head
    title= title
    script(src='/javascripts/jquery.min.js')
    link(rel="stylesheet", href="/stylesheets/index.css")
    link(rel="stylesheet",type='text/css', href="/public/stylesheets/left_navigator.less")
    script(src='/javascripts/index_in.js')
    block script
body

index.jade:

extends ./index_in_layout

block script

    script(src='/javascripts/new_club.js')
    script(src='/javascripts/new_bond.js')
    script(src='/javascripts/new_event.js')
    script(src='/javascripts/popup.js')
    script(src='/javascripts/list_clubs.js')
    script(src='/javascripts/list_bonds.js')
    script(src='/javascripts/list_events.js')
    link(rel='stylesheet', type='text/css', href='/public/stylesheets/test.less')


block body

ターミナルはError: ENOENT、私のleft_navigator.lessが開けないと言い続けます。test.less と navigator.less を同じディレクトリに置いたのですが、意味がありません。

サーバー側のLESSは私を夢中にさせます。誰か助けてください。ありがとう

4

1 に答える 1

1

私が何かを見逃していない限り、作業を減らすためにこれらの英雄的なことを実際に行う必要はありません:-) 通常、次のように app.configure 呼び出しに1行追加するだけです:

app.configure(function() {
    app.set('views', __dirname + '/views');
    ...
    app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
    app.use(connect.static(__dirname + '/public'));
    app.use(app.router);
});

このようにすれば、*.less ファイル用の特別なルートは必要ありません。パブリック フォルダーで同じ名前の *.css を要求するだけで、自動的に生成されます。例が役立つ場合は、ここで jade と LESS でマスター/子レイアウトを使用します。

https://github.com/JustinBeckwith/ExpressStarter

ハッピーコーディング！

于 2012-08-11T08:00:02.187 に答える