express.js + stylus:自动手写笔编译不起作用

Question

我正在使用stylus 0.37.0运行express.js 3.4.0我试图让express和stylus一起工作所以当我请求一个css文件实际上是一个其他地方的手写笔文件时,表达触发器手写笔来编译它然后服务它(相当标准我猜,因为我看到它在许多教程中工作).

我的文件结构:

myApp
  resources
    stylus
      style.styl
  public
    css

我的app.js(只有相关的行):

app.use("/static", express.static(__dirname + "/public"));
app.use(stylus.middleware({
    src: __dirname + "/resources/stylus",
    dest: __dirname + "/public/css",
    debug: true,
    force: true,
}));

根据我的阅读,请求/static/css/style.css应该导致表达生成此文件resources/stylus/style.styl,然后提供它.这不起作用.有效的是,如果我请求文件正确生成/style.css文件/public/css/style.css,但我得到了404.之后,我可以通过/static/css/style.css身体现在请求它.

有人可以建议任何解决这个问题的步骤吗？我错过了什么吗？

Answer 1

要使编译生效,您所服务的目录也必须存在于源目录中.由于style.styl它位于源的根目录中,因此它也位于GET请求的根目录中.在资源中,重命名stylus为css,并将配置更改为如下所示:

app.use(stylus.middleware({
  src: __dirname + '/resources',
  dest: __dirname + '/public',
  debug: true,
  force: true
}));

现在,当你GET /css/style.css,它将编译样式表.从图形上看,这就是编译的结构:

/resources/style.styl       -->   /public/style.css
/resources/css/style.styl   -->   /public/css/style.css

然后,另一个问题出现了.你想成为/public有/static.

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

您必须将该行更改为:

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

解决方案是构建您的应用程序,如下所示:

myApp
??? public
? ??? static
?   ??? css
??? resources
  ??? static
    ??? css
      ??? style.styl

现在,当你GET /static/css/style.css,样式表将从位置编译/resources/static/css/style.styl.

因此,上面显示的文件树和此代码:

var express = require('express');
var stylus = require('stylus');
var app = express();

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: __dirname + '/resources/',
  dest: __dirname + '/public/',
  debug: true,
  force: true,
}));

在第一次加载时/static/css/style.css将是404,但在第二次加载时,样式表将在那里.