如何在不使用指南针的情况下将 susy 添加到胸部？答案

【问题标题】：How to add susy to thorax without using compass?如何在不使用指南针的情况下将 susy 添加到胸部？
【发布时间】：2014-05-31 08:46:16
【问题描述】：

我已经开始使用 Thorax，并且我已经使用 yeoman 的 thorax 生成器来设置 webapp：

$ npm install -g yo generator-thorax
$ yo thorax desired-application
$ cd desired-application
$ grunt

我选择了 SASS 作为 css 预处理器，然后我可以在使用 grunt 命令构建它之后成功运行我的 webapp。

现在我的问题是我不确定如何将 susy 添加到我的 Gruntfile.js。 documentation 声明您应该将require: 'susy' 添加到 SASS 选项参数中。

但我的 Gruntfile.js 中没有 SASS 选项，我尝试将其添加到其中 - 但是当我将 @import "susy"; 添加到我的 css/base.scss 文件时它不起作用。

有没有人成功地将 susy 添加到胸部应用程序中？

编辑我也试过通过 bower 添加 susy。

bower install susy --save

然后我可以执行@import "../bower_components/susy/sass/susy"; 但是如果将 susy 添加到我在 gruntfile.js 中的 SASS 选项中并能够执行 @import "susy"; 代替会很好。

【问题讨论】：

记得接受帮助您解决问题的答案

标签： sass gruntjs yeoman susy-sass

【解决方案1】：

嗯，如果你正确地完成了Gruntfile，我想那是你安装susy的方式有问题。

您的红宝石中是否有正确的（和最新的 2.1.2）gem 并且您拥有 r/w 权限？如果没有，请尝试运行：

gem install susy

就像他们的文档中所说的那样，Susy 是构建为Compass 的一部分，您应该尝试安装它

gem install compass

并在您的Gruntfile 中添加一个指南针任务，如下所示：

compass: {
    dist: {
        options: {
            require: 'susy',
            cssDir: 'css',
            sassDir: 'sass'
        }
    }
}

其中cssDir 和sassDir 分别是指南针任务的目标文件夹和源文件夹。

别忘了安装插件：

npm install grunt-contrib-compass --save-dev

加载并注册它

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', [compass']);

或者，如果您根本不需要指南针：

npm install grunt-contrib-sass --save-dev

sass: {
    dist: {
        options: {
            style: 'expanded',
            require: 'susy'
        },
        files: {
            'css/compiled.css': 'main.scss'
        }
    }
}

【讨论】：

感谢您的回答，我看到 susy v1 需要指南针 - 但 v2 不需要指南针，对吗？如果可能的话，我只想添加 Susy 而不使用 Compass。（所以通过在 gruntfile 中为 SASS 任务添加一个选项）。
是的，这不是必需的，但建议更新我的答案以仅放置一个 sass 任务示例
感谢您的 sass 任务，这与我从文档中得到的相同 - 所以我之前尝试过，但如果我执行 @import "susy" 仍然会出错；我现在正在尝试了解有关如何配置 grunt/SASS 的更多信息。
感谢您的帮助！我遇到的问题是已经通过 thorax yeoman 生成器添加了一个 sass 任务 - 只要我在那里添加了该选项，它就起作用了！我添加了一个答案，显示了我必须执行的步骤。

【解决方案2】：

所以我发现通过 /task 文件夹包含的 grunt 任务 - 一旦我将我的选项添加到 SASS.js 任务文件中，它就起作用了！以下是我执行的步骤：

首先如果你之前没有安装过 yeoman generator for thorax，运行：

$ npm install -g yo generator-thorax

然后通过 yeoman 生成器创建您的 thorax 应用程序（选择 SASS 作为您的 css 预处理器）：

$ yo thorax desired-application

然后添加 Susy gem

$ sudo gem install susy

然后打开 tasks/options/sass.js，并将 require: 'susy' 添加到 SASS 任务中，如文档中所述。你的 sass.js 应该如下所示：

var grunt = require('grunt');

module.exports = {
  dist: {
    options: {
      style: 'expanded',
      require: 'susy'
    },
    files: [{
      expand: true,
      cwd: grunt.config('paths.css'),
      src: ['*.{sass,scss}'],
      dest: grunt.config('paths.output.css'),
      ext: '.css'
    }]
  }
};

然后您可以将 @import "susy"; 添加到您的 css/base.scss 中，然后运行：

$ cd desired-application
$ grunt

【讨论】：