How use .less files in sails.js?

Question

I'm reading http://sailsjs.org/#!documentation/assets but I don't figure out how use .less files.

I put vairables.less and bootswatch.less both in assets/linker/styles/

I expected that grunt would have compiled both files but it didn't, and I got errors in the browser console instead:

GET http://localhost:5000/linker/styles/bootstrap-responsive.css 404 (Not Found) (index):14
GET http://localhost:5000/linker/styles/bootstrap.css 404 (Not Found) (index):15
GET http://localhost:5000/linker/js/jquery.js 404 (Not Found) (index):29
GET http://localhost:5000/linker/js/socket.io.js 404 (Not Found) (index):30
GET http://localhost:5000/linker/js/sails.io.js 404 (Not Found) (index):31
GET http://localhost:5000/linker/js/app.js 404 (Not Found) (index):32
GET http://localhost:5000/linker/js/bootstrap.js 404 (Not Found) 

If I remove the two .less files it works correctly. What am I missing here?

Answer 1

I have decided to not use the sails default importer. Mostly because I find it bad, too much based on configuration over convention. So I have made my own dynamic assets loader based on convention over configuration.

Basically, in mine, there is nothing more to do, the assets will be applied based on the controller, controller action, theme and layout used. And it still use LESS.

Here is a simple project based on sails 0.10.5: https://github.com/Vadorequest/sails-dynamic-assets

Answer 2

If you are using latest version of Sails.js then put the .less file under assets/styles directory and include it in importer.less file like below:

/**
 * importer.less
 *
 * By default, new Sails projects are configured to compile this file
 * from LESS to CSS.  Unlike CSS files, LESS files are not compiled and
 * included automatically unless they are imported below.
 *
 * The LESS files imported below are compiled and included in the order
 * they are listed.  Mixins, variables, etc. should be imported first
 * so that they can be accessed by subsequent LESS stylesheets.
 *
 * (Just like the rest of the asset pipeline bundled in Sails, you can
 * always omit, customize, or replace this behavior with SASS, SCSS,
 * or any other Grunt tasks you like.)
 */



// For example:
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.
@import 'custom.less';