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，但在第二次加载时，样式表将在那里。

Answer 2

基于answer的hexacyanide，我添加了path.join以确保它适用于任何操作系统（例如，在Windows上，有时它在不使用正确的路径分隔符时不起作用）。

代码最终看起来像这样：

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

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

路径模块应根据操作系统添加正确的路径分隔符（'/'或'\'）。

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

2 个答案: