如何在sails.js 中使用.less 文件？

Question

我正在阅读http://sailsjs.org/#!documentation/assets，但我不知道如何使用 .less 文件。

我将 vairables.less 和 bootswatch.less 都放在 assets/linker/styles/ 中

我预计 grunt 会编译这两个文件，但事实并非如此，而是在浏览器控制台中出现错误：

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) 

如果我删除两个 .less 文件，它可以正常工作。 我在这里错过了什么？

Answer 1

我决定不使用sails 默认导入器。主要是因为我觉得它很糟糕，太多基于配置而不是约定。因此，我基于约定优于配置制作了自己的动态资产加载器。

基本上，在我的情况下，没有什么可做的，资产将根据所使用的控制器、控制器动作、主题和布局来应用。而且它仍然使用 LESS。

这是一个基于sails0.10.5的简单项目： https://github.com/Vadorequest/sails-dynamic-assets

Answer 2

如果您使用的是最新版本的 Sails.js，请将 .less 文件放在 assets/styles 目录下，并将其包含在 importer.less 文件中，如下所示：

/**
 * 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';