4

私は自分のプロジェクトを持っていて、express2.5.7からexpress3.0.3にいくつかのコードを移植していました。ほぼ1：1の転送だと思っていましたが、指定したディレクトリにスタイラスファイルをコンパイルできないという問題が発生しています。これが私の基本的なapp.jsセットアップです：

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , nib = require('nib')
  , bootstrap = require('bootstrap-stylus')
  , stylus = require('stylus');

var app = module.exports = express();

app.configure('dev', function(){
  var stylusMiddleware = stylus.middleware({
    src: __dirname + '/stylus/', // .styl files are located in `/stylus`
    dest: __dirname + '/public/css/', // .styl resources are compiled `/css/*.css`
    debug: true,
    compile: function(str, path) { // optional, but recommended
      console.log(path);
      return stylus(str)
        .set('filename', path)
        //.set('warn', true)
        .set('compress', true)
        .use(bootstrap())
    }
  });
  app.use(express.logger('dev'));
  app.use(stylusMiddleware);  
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
  app.set('view options', { pretty: true });
});

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

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

私はapp.configureものをテストしました、そしてそれは正しいメソッド（「dev」と関数だけで設定する）を通過しています

4

1 に答える 1

6

src私もカスタムを設定しようとしましたdestが、できません。解決策を探すために、私はスタイラスのソースを調べました。つまり、ファイルへのパスstylとcssファイルへのパスは類似している必要があります。cssHTMLのファイルへのリンクが次のようになっている場合

<link rel="stylesheet" href="css/app.css">

そしてその物理的な経路は

public/css/app.css

次に、stylファイルは次の場所に配置する必要があります

stylus/css/app.styl

Expressconfigは次のようになります

app.configure('dev', function () {
  ...
  app.use(stylus.middleware({
    src: __dirname + '/stylus/',
    dest: __dirname + '/public/',
    compile: function(str, path) { ... }
  }));
  ...
});

ソースで見たもの。

Stylusはすべてのリクエストを解析し、リクエストされたファイルのみを選択しcssます。次に、cssURLのパス名をオプションと組み合わせ、パス名をindestに置き換え、結果をオプションと組み合わせます。cssstylsrc

// Middleware
return function stylus(req, res, next){
  if ('GET' != req.method && 'HEAD' != req.method) return next();
  var path = url.parse(req.url).pathname;
  if (/\.css$/.test(path)) {
    var cssPath = join(dest, path)
      , stylusPath = join(src, path.replace('.css', '.styl'));

    // ...

  } else {
    next();
  }
}
于 2013-02-11T08:15:17.867 に答える