Is there a way to force Stylus to use src and dest paths that do not contain the stylesheets directory?

Question

I recently started using Node and Stylus and ran into this problem. I want to save the created css to / public / css, not / public / stylesheets, and it seems that the Stylus settings will not allow this.

// ... your middleware here app.use(stylus.middleware({ src: __dirname + '/views', // .styl files are located in `views/stylesheets` dest: __dirname + '/public', // .styl resources are compiled `/stylesheets/*.css` compile: function(str, path) { return stylus(str) .set('filename', path) .set('warn', true) .set('compress', true); } })); 

The comments in the above code are taken from the Stylus example. For the src and dest properties, "/ stylesheets" is automatically added (as follows from the comments in the original example). This seems unnecessary, and I think I'm wondering if there is a way to disable this.

Answer 1

This is not possible at the moment, from what I am compiling from pull # 128 request. The workaround is an additional directory corresponding to the path created by the middleware, which seems more ugly than the problem itself.

Assuming your HTTP request /css/file.css , your dir structure should look like this:

 /view/stylesheets/css/*.styl /public/css/*.css 

and your middleware configuration should look like this:

 debug: true, // Set this flag to see what the middleware is doing src: __dirname + '/views/stylesheets', dest: __dirname + '/public', 

(I have not tried this, but the dot should match the expected middleware.)

Answer 2

You tried:

  src: __dirname + '/views/stylesheets', dest: __dirname + '/public/css', 

Taking a look at the code: https://github.com/LearnBoost/stylus/blob/master/lib/middleware.js

This should work as the relative path of the stylus file (to src dir) no longer contains styles. Nothing is attached as such.

Answer 3

I faced the same problem. I used src as a function .. for example: your path to http address

 GET /css/style.css 

then replace /css and find in the stylesheets folder.

 app.use(stylus.middleware({ src: function( path ){ // print it for debug console.log( path ); return require('path').join( __dirname + '/views/stylesheets', path.replace('/css' ,'').replace('.css', '.styl') ); }, dest:__dirname + '/public' , debug: true, ... 

it will generate css files in the __dirname + '/public/css/ folder

or

create a css folder under __dirname + '/views/stylesheets' and move *.styl files to it

 app.use(stylus.middleware({ src: __dirname + '/views/stylesheets', dest:__dirname + '/public' , debug: true, ...