0

我已经开始使用 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 中。文档声明您应该添加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";。

4

2 回答 2

1

嗯，如果你做对了Gruntfile，我想那是你安装的方式有问题susy。

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

gem install susy

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

gem install compass

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

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

WherecssDir和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'
        }
    }
}
于 2014-05-31T18:55:10.250 回答
0

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

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

$ npm install -g yo generator-thorax

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

$ yo thorax desired-application

然后添加 Susy 宝石

$ 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
于 2014-06-01T10:58:54.550 回答