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)

我在[{1}}中添加了样式，如：

layout.jade

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

当我将浏览器直接指向link(rel="stylesheet", href="/css/styles.css")时，我得到了

/css/styles.css

什么错了？我该如何解决？

Answer 1

您是否正确配置了static中间件并在中间件堆栈中使用手写笔中间件后工作和定位？手写笔中间件只是读取.styl文件并写入相应的.css文件，但它希望static中间件找到.css文件并提供服务。< / p>

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

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'));
});

不确定这是否是与手写笔版本相关的问题并且之前没有/存在但仍然让我感到困惑。

Answer 3

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

我从/ public

提供我的外部文件

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

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

我绕过了那些糟糕的道路要求，因为我总是要求/ style中的样式

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

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目录，看来你指的是模块/手写笔，在任何地方，我都不是表达，但这种方式有效

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

4 个答案: