7

我正在使用手写笔 0.37.0 运行 express.js 3.4.0 我试图让 express 和手写笔一起工作，所以当我在其他地方请求一个实际上是手写笔文件的 css 文件时，express 触发手写笔编译它然后提供它（我想这是相当标准的，因为我在许多教程中都看到了它）。

我的文件结构：

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因为它现在物理上存在。

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

4

2 回答 2

11

为了使编译工作，您提供服务的目录也必须存在于源目录中。由于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，样式表将从 location 编译/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 但在第二次加载时样式表将在那里。

于 2013-09-14T20:26:34.270 回答
0

根据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,
}));

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

于 2016-08-27T19:05:02.533 回答