Question

我已经开始使用Thorax了，我已经使用胸腔发生器和yeoman建立了一个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添加到胸部应用程序中？

修改的我也试过通过凉亭添加susy。

bower install susy --save

然后我能够做@import "../bower_components/susy/sass/susy";然而，将susy添加到gruntfile.js中的SASS选项并且能够改为@import "susy";会很好。

Answer 1

嗯，如果您已正确完成Gruntfile，我认为您安装susy的方式存在问题。

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

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'
        }
    }
}

Answer 2

所以我发现通过/ task文件夹包含的grunt任务 - 只要我将选项添加到SASS.js任务文件就可以了！这是我做的步骤：

首先，如果你以前没有为胸腔安装过yeoman发生器，请运行：

$ 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：＆＃39; susy＆＃39;按照文档中的说明进行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

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

2 个答案: