Express中的Stylus中间件无法工作？

Question

在 app.coffee 文件中，我有以下内容：

stylus = require("stylus")

...
app.use stylus.middleware
    debug: true
    src: __dirname + "/stylus"
    dest: __dirname + "/public/css"
    compile: (src) -> 
        console.log(stylus(src))
        return stylus(src)

我把样式表包含在layout.jade里，像这样：

link(rel="stylesheet", href="/css/styles.css")

但是在Chrome网络选项卡中，我看到styles.css被取消了，为什么会这样？

当我直接将浏览器指向/css/styles.css时，我得到以下结果：

无法获取/css/styles.css

出了什么问题？我该如何解决？

- Jiew Meng

Answer 1

您是否已经正确配置并将static中间件放置在stylus中间件之后的中间件堆栈中？Stylus中间件将读取.styl文件并写入相应的.css文件，但它期望static中间件能够找到.css文件并将其提供给客户端。

此外，请注意您的src和dest文件层次结构应直接对应。也就是说，即使计算所有中间目录的内容（例如使用ls -R或类似命令），它们之间唯一的区别应该是src包含.styl文件，而dest则包含完全对应的.css文件。不要在一个中添加/css前缀而在另一个中没有添加，例如。

- Peter Lyons

---

删除 app.router 这一行。你几乎不需要手动更改 app.router 中间件的位置，这样做几乎总会导致问题，例如此类问题。 - Peter Lyons

哦，我找到问题所在了...看起来dest不能是嵌套文件夹（例如__dirname + "/public/css"）？将其更改为__dirname + "/public"即可解决。你有什么想法为什么会这样，我相信它不是那么死板的？ - Jiew Meng

源目录和目标目录只需要正确对应即可。 - Peter Lyons

@PeterLyons 你应该编辑你的回答并添加这个评论，我花了很长时间来尝试让它工作，并且有相同的嵌套（/stylus/css和/public/css）解决了它！ - chrisfrancis27

@PeterLyons 这对我来说似乎非常奇怪。如果我传入 {src: __dirname + "/stylus", dest: __dirname + "/public/css"}，我会期望 /stylus/style.css 映射到 /public/css/style.css。相反，被接受的解决方案是传入 {src: __dirname + "/stylus", dest: __dirname + "/public"} 然后 mkdir stylus/stylesheets; mv stylus/*.styl stylus/stylesheets。我理解为什么修复可以工作，但最初为什么不起作用呢？style/style.css 映射到哪里了？src 和 dest 中的层次结构确实完全对应 - 它们都只有样式文件，没有目录。 - bytesized

Answer 2

最近我遇到了同样的问题，按照@PeterLyons的回答是正确的，但我发现在css目录名后添加额外的斜杠也可以解决这个问题。

(不需要咖啡)

var stylus = require('stylus');

app.configure(function() {
    app.use(stylus.middleware({
        src: __dirname + '/stylus',
        dest: __dirname + '/public/css/' // <-- additional slash after "css"
    }));
    app.use(express.static(__dirname + '/public'));
});

我不确定这是否是与Stylus版本相关的问题，但之前可能存在/不存在，但对我来说仍然相当令人困惑。

- Pawel Sledzikowski

---

这对我解决了问题，尽管我不改变目标，但必须使用“src”键值来完成。 - olive

Answer 3

这个问题已经困扰我几个小时了，所以我想分享一下 :)

我从 /public 服务我的外部文件

所以我的样式表在 /public/styles 中。我所要做的就是将我的 .styl 文件放到项目根目录下名为 /styles 的文件夹中。

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

我绕过了古怪的路径要求，因为我总是会在/styles中请求样式

GET /styles/website.css 从项目的根目录/中提供/styles/website.styl

- user3127670

Answer 4

这对我有效

app.use(express.static('public'));

//stylus
function compile(str, path) {
return stylus(str)
.set('filename', path)
}

app.use(stylus.middleware(
{ src:'/public/css'
 , compile: compile
}
));

将你的 file.styl 放在 public.css 中，它也会在那里编译！问题必须是 src 目录，看起来你指向了 modules/stylus，虽然我不是专家，但这种方式可以工作。

- Elkin Hernandez