For the compiling to work, the directory that you're serving from must also exist in the source directory. Since style.styl
is in the root of the source, it is also in the root for GET
requests. In resources, rename stylus
to css
, and change your configuration to look like this:
app.use(stylus.middleware({
src: __dirname + '/resources',
dest: __dirname + '/public',
debug: true,
force: true
}));
Now when you GET /css/style.css
, it will compile the stylesheets. Graphically, this is how compiling is structured:
/resources/style.styl --> /public/style.css
/resources/css/style.styl --> /public/css/style.css
Then, another issue comes up. You want to serve /public
with /static
.
app.use('/static', express.static(__dirname + '/public'));
You will have to change that line to:
app.use('/static', express.static(__dirname + '/public/static'));
The solution to this would be to structure your application like this:
myApp
├─┬ public
│ └─┬ static
│ └── css
└─┬ resources
└─┬ static
└─┬ css
└── style.styl
Now, when you GET /static/css/style.css
, the stylesheets will be compiled from location /resources/static/css/style.styl
.
As a result with the file tree shown above and this code:
var express = require('express');
var stylus = require('stylus');
var app = express();
app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
src: __dirname + '/resources/',
dest: __dirname + '/public/',
debug: true,
force: true,
}));
On first load /static/css/style.css
will 404 but on second load the stylesheets will be there.