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.