3

在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，我得到

Cannot GET /css/styles.css

怎么了？我该如何解决？

4

4 回答 4

11

您是否static在中间件堆栈中的触控笔中间件之后正确配置和工作并定位中间件？stylus 中间件只是要读取.styl文件并写入相应的.css文件，但它希望static中间件找到.css文件并提供它。

另请注意，您的src和dest文件层次结构应直接对应。我的意思是，如果您列出一个目录（ls -R或类似目录）的递归内容，甚至计算所有中间目录，那么唯一的区别应该是src包含.styl文件并dest包含完全对应的.css文件。例如，不要将/css前缀附加到一个而不是另一个。

于 2012-12-29T05:57:58.417 回答
3

最近我遇到了同样的问题，只要@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'));
});

不确定这是否是与手写笔版本相关的问题，并且以前不存在/不存在，但它仍然让我很困惑。

于 2013-08-07T09:52:36.117 回答
0

这让我发疯了几个小时，所以我想我会分享:)

我从 /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

于 2013-12-22T18:26:41.340 回答
0

这对我有用

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 目录，似乎你指向模块/手写笔，在任何地方我都不是专家，但这种方式有效

于 2015-09-10T21:58:37.133 回答