CODEWITHSUNDEEP
node.jsstylus
cilphex
cilphex

Reputation: 6096

Is there a way to make Stylus use src and dest paths that don't contain a "stylesheets" directory?

I've recently begun using Node and Stylus and run into this issue. I want to keep my generated css in /public/css, not /public/stylesheets, and it seems that the Stylus configuration options won't allow for that.

// ... 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 from a Stylus example. For the src and dest properties, "/stylesheets" is automatically appended (as the comments from the original example imply). This seems unnecessary and I guess I'm wondering if there's just a way to turn that off.

Upvotes: 4

Views: 2279

Answers (3)

rab
rab

Reputation: 4144

I have faced same issue like this . I used src as function .. eg : your http request path is 

GET /css/style.css

then replace /css and locate into 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 under folder __dirname + '/public/css/

or

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

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

Upvotes: 0

thatmarvin
thatmarvin

Reputation: 2880

This is not possible at the moment, from what I gather from pull request #128. The workaround is nesting an extra directory to match the path generated by the middleware, which seems uglier than the problem itself.

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

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

and your middleware config should look like this:

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

(I haven't tried this, but point is to match what the middleware expects.)

Upvotes: 1

user935712063
user935712063

Reputation: 1391

Have you tried:

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

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

That should work as the stylus file relative path (to src dir) no longer contains stylesheets. Nothing is appended per se.

Upvotes: 0

Related Questions