Stylus and Express - stylesheets are not re-compiled when modified

假装没事ソ 提交于 2019-12-18 11:28:08

问题


I am running latest version of Node on Mac OS X. I've installed Express together with Stylus. Also the latest versions.

Stylus is not re-compiling my .styl files, when I modify them. How can I fix this?

The only solution to getting my .styl files re-compiled, is to delete the compiled .css files... re-starting my application, or doing a clear-cache-refresh (CMD + Shift + R) is not resulting a re-compile.

Here's a dump of my application configuration. It's basically the same as when you create a new express application with the executable...

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

Both my .styl and the compiled .css files are located in [application]\public\stylesheets\


回答1:


Put static() below the stylus middleware.




回答2:


It can be too late now, but I've just passed some hours ( T__T ) on this, and I think it's a bug of jade or something like that. I'll explain myself: With this code in 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'));

and in the index.jade:

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

it works perfectly. The problem was when in the link tag there was:

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

and then it was not recompiling at all.

I hope this will help




回答3:


Default settings Express.js

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

Stylus compress setting Express.js you must add the style sheet in the document, page loading is compiled and compresses the css

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


来源:https://stackoverflow.com/questions/5612777/stylus-and-express-stylesheets-are-not-re-compiled-when-modified

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!