I'm reading !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 piled 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?

I'm reading http://sailsjs/#!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 piled 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?

• javascript
• twitter-bootstrap
• less
• sails.js

• 1 It looks like your .tmp directory isn't getting populated. Is Grunt throwing any errors? Lift sails with --verbose to check. – sgress454 Commented Jan 24, 2014 at 3:05
• 1 It's because there are some errors in the less files. Thanks. verbose: Grunt :: >> NameError: .box-shadow is undefined in assets/linker/styles/bootswatch.less:21:2 >> 20 border-top-color: @dropdown-divider-bg; >> 21 .box-shadow(none); >> 22 } – Vadorequest Commented Jan 24, 2014 at 6:55
• 2 I realy think that this kind of error shouldn't be displayed as verbose. Difficult to debug! – Vadorequest Commented Feb 11, 2014 at 16:03

2 Answers 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 pile this file
 * from LESS to CSS.  Unlike CSS files, LESS files are not piled and
 * included automatically unless they are imported below.
 *
 * The LESS files imported below are piled 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';

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./Vadorequest/sails-dynamic-assets