Use Stylus with Sails JS 0.10

Starting to use Sails with Jade template is easy with the command:

sails new app --template=jade

How to add Stylus as default CSS preprocessor? (with the latest Sails version)

I wasn't able to find a better way to add Stylus to the latest Sails, than using grunt:

  • Add grunt-contrib-stylus to project dependencies:

    npm install grunt-contrib-stylus --save
    
  • Create a new grunt task stylus.js under tasks/config directory:

    module.exports = function(grunt) {
    
    grunt.config.set('stylus', {
        dev: {
            files: [{
                expand: true,
                cwd: 'assets/styles/',
                src: ['importer.styl'],        //Edit this to match your files
                dest: '.tmp/public/styles/',
                ext: '.css'
            }]
        }
    });
    
    grunt.loadNpmTasks('grunt-contrib-stylus');
    
    };
    

Task will be executed automatically on sails lift, check result in .tmp/public/styles

Its a few step process, first add First npm install grunt-contrib-stylus then create a file /tasks/config/stylus.js and add:

module.exports = function(grunt) {

grunt.config.set('stylus', {
    dev: {
        files: [{
            expand: true,
            cwd: 'assets/styles/',
            src: ['style.styl'],
            dest: '.tmp/public/styles/',
            ext: '.css'
        }]
    }
});

grunt.loadNpmTasks('grunt-contrib-stylus');

};

then add, 'stylus:dev' to /tasks/register/compileAssets.js && syncAssets.js after that add 'styl' to /task/register/copy.js for files to ignore

And it should all work, this is my first stackoverflow answer xD

Go to tasks/config and add a stylus.js file with the following code:

module.exports = function(grunt){

    grunt.config.set('stylus', {
        dev: {
            files: [{
                expand: true,
                cwd: 'assets/styles/',
                src: ['main.styl'],
                dest: '.tmp/public/styles/',
                ext: '.css'
            }]
        }
    });

    grunt.loadNpmTasks('grunt-contrib-stylus');

}

Then go to tasks/register (which what previous answers missed) and add in both syncAssets.js and compileAsset.js where relevant:

'stylus:dev'

Looking at this pull it looks like it's already built into sails.

If it doesn't work automatically then it can probably be configured in the gruntfile.