Question

我在尝试设置Stylus时非常沮丧，因为我会调整我的src和dest设置，重新启动Node，刷新，并且Stylus没有编译。这是在http://localhost:3000/tasks这样的页面上。但是，src和dest路径是正确的，当我重新启动Node并尝试加载索引页http://localhost:3000时，Stylus会正确编译。

所以现在我已经发现它正在正确编译，但只是来自主页URL，我想知道我是否设置了错误，因为.styl文件的任何更改都没有更新，直到我刷新主页，而不是任何GET参数页面。

var express = require('express');
var app = express();
var stylus = require('stylus');

app.configure(function () {
    this.set("views", __dirname + "/views/jade");
    this.set("view engine", "jade");
    this.use(express.bodyParser());
    this.use(express.methodOverride());
    this.use(this.router);

    this.use(stylus.middleware({
        src: __dirname + '/views/styl', //styl files to be compiled
        dest: __dirname + '/public/css', //destination for compiled css
        compress: true
    }));

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

我正在描述正常的过程，或者如果它注意到.styl文件中的更改，那么无论您的URL是什么，Stylus都应重新编译？

Answer 1

我最终使用默认的Stylus路径，这意味着在我的“views”和“public”目录中使用名为“stylesheets”的目录，以及以下代码：

    //Stylus
    this.use(stylus.middleware({
        src: __dirname + '/views', //styl files to be compiled
        dest: __dirname + '/public', //destination for compiled css
        compress: true
    }));

Stylus然后在/ views / stylesheets中查找.styl文件，并将它们编译为/ public / stylesheets。出于某种原因，尝试更改目录的名称并对我的路径感到高兴让我陷入困境。从阅读一些论坛来看，这似乎不是现在的错误，但确实如此。

Answer 2

我没有50的评论声誉，但您可以根据需要更改路径。首先需要path模块：

path = require('path')

然后根据自己的喜好来解决：

path.resolve('./') //this will be resolved to where your node app resides
path.resolve('../') //this will go one directory up from the path of your node app file
path.resolve('../../')  //this will go two directories up from the path of your node app file

使用console.log()查看这些产生的内容。然后，对于手写笔中的选项，只需将__dirname作为基础，而不是将其更改为已解析的路径。假设你有一个目录结构：

$userPath/myApp/frontend/src/app.js
$userPath/myApp/frontend/src/public
$userPath/myApp/frontend/static/public

然后你可以：

var staticPath = path.resolve('../') + '/static'; //$userPath/myApp/frontend/static

app.use(
  stylus.middleware({
    src:  __dirname + '/public/',
    dest: staticPath + '/public/',
    debug: true,
    compile : function(str, path) {
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
  })
);

Stylus仅在索引页面加载时重新编译.styl文件

2 个答案: