在 Sails JS 0.10 中使用触控笔答案

【问题标题】：Use Stylus with Sails JS 0.10在 Sails JS 0.10 中使用触控笔
【发布时间】：2014-08-07 14:30:51
【问题描述】：

使用 Jade 模板很容易开始使用 Sails：

sails new app --template=jade

如何添加 Stylus 作为默认 CSS 预处理器？（使用最新的 Sails 版本）

【问题讨论】：

标签： css node.js sails.js stylus

【解决方案1】：

它的几个步骤过程，首先添加首先 npm install grunt-contrib-stylus 然后创建一个文件 /tasks/config/stylus.js 并添加：

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');

};

然后将“stylus:dev”添加到 /tasks/register/compileAssets.js && syncAssets.js 之后将“styl”添加到 /task/register/copy.js 以忽略文件

这一切都应该工作，这是我的第一个 stackoverflow 答案 xD

【讨论】：

【解决方案2】：

我找不到比使用 grunt 更好的方法将 Stylus 添加到最新的 Sails：

将 grunt-contrib-stylus 添加到项目依赖项中：
```
npm install grunt-contrib-stylus --save
```

在tasks/config目录下新建一个grunt任务stylus.js：

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');

};

任务会在sails lift自动执行，检查结果在.tmp/public/styles

【讨论】：

【解决方案3】：

转到tasks/config 并使用以下代码添加stylus.js 文件：

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');

}

然后转到tasks/register（之前的答案错过了）并在相关的地方添加syncAssets.js和compileAsset.js：

'stylus:dev'

【讨论】：

【解决方案4】：

看看这个pull，它看起来好像已经内置在风帆中了。

如果它不能自动工作，那么它可能可以在 gruntfile 中配置。

【讨论】：

你的链接真的很旧，2013 年 5 月 7 日，也许我们可以期待一些更优雅的东西，比如“--template”选项！