Stylus和Express - 修改样式表时不重新编译

Question

我在Mac OS X上运行最新版本的Node。我已经安装了Express和Stylus，也都是最新版本。

当我修改.styl文件时，Stylus没有重新编译它们。我该如何解决这个问题？

唯一解决方法就是删除已编译的.css文件... 重新启动我的应用程序，或者进行清除缓存刷新（CMD + Shift + R）也不能实现重新编译。

下面是我的应用程序配置转储。基本上与使用可执行文件创建新的express应用程序时相同...

app.configure(function ()
{
    this.set("views", __dirname + "/views");
    this.set("view engine", "jade");

    this.use(express.bodyParser());
    this.use(express.methodOverride());
    this.use(express.static(__dirname + '/public'));

    this.use(require("stylus").middleware({
        src: __dirname + "/public",
        compress: true
    }));

    this.use(this.router);
});

我的.styl和编译后的.css文件都位于[application]\public\stylesheets\中

- cllpse

Answer 1

在 stylus 中间件下面添加 static()。

- tjholowaychuk

---

我自己弄明白了那部分。但是为什么顺序很重要呢？ - cllpse

是的，那大概就是它的工作原理，只要使用()的顺序正确即可。因为连接本质上只是一个任意函数，所以您开发者可以决定它何时执行。 - tjholowaychuk

我是一名新手，对于Put static() below the stylus middleware.这句话一无所知。我真的希望能有一个可视化的解释。 - ThomasReggi

将此行代码："this.use(express.static(__dirname + '/public'));" 移动到此行代码 "this.use(this.router);" 的正上方。 - tokudu

这正是那种让你回到Node的评论，TJ！为什么呢？ - Matt Fletcher

Answer 2

现在可能有点晚了，但我刚刚花了几个小时（T__T）在这上面，我认为这是 jade 或类似的 bug。我来解释一下：在 server.js 中使用以下代码：

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(
  stylus.middleware({
    src:  __dirname + "/assets/stylus", 
    dest: __dirname + "/assets/css",
    debug: true,
    compile : function(str, path) {
      console.log('compiling');
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
  })
 );
app.use(express.static(__dirname + '/assets'));

在index.jade文件中：

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

它的功能非常完美。问题出在链接标签中：

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

然后它根本没有重新编译。

希望这能帮到你。

- LowFieldTheory

---

哈哈，你说得太对了！有趣的是，改变文件夹名称就可以解决问题了！ - Donald Derek

Answer 3

Express.js 的默认设置

app.use(require('stylus').middleware(path.join(__dirname, 'public')));

Stylus压缩设置Express.js 您必须在文档中添加样式表，页面加载时编译并压缩CSS。

app.use(require('stylus').middleware({src: path.join(__dirname, 'public'), compress: true}));

- Alexis Sniffer

---

欢迎来到Stack Overflow！虽然这个答案可能是正确和有用的，但最好还是附上一些解释，以说明它如何帮助解决问题。如果将来发生了变化（可能与此无关），导致它停止工作，用户需要了解它曾经是如何工作的，这时解释就变得尤为重要。 - Kevin Brown-Silva