Как добавить Сьюзи в грудную клетку без использования компаса?

Question

Я начал использовать Thorax и использовал генератор thorax с yeoman для настройки веб-приложения:

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

Я выбрал SASS в качестве препроцессора CSS, а затем я могу успешно запустить свое веб-приложение после сборки его с помощью grunt команда.

Теперь моя проблема в том, что я не уверен, как я могу добавить susy в мой Gruntfile.js. В документации говорится, что вы должны добавить require: 'susy' к параметру параметров SASS.

Но у меня нет опций SASS в моем Gruntfile.js, я попытался добавить его, но он не работает, когда я добавляю @import "susy"; в мой файл css / base.scss.

Кто-нибудь успешно добавил susy в приложение для грудной клетки?

РЕДАКТИРОВАТЬ Я также пытался добавить Сьюзи через беседку.

bower install susy --save

И я тогда смогу сделать @import "../bower_components/susy/sass/susy"; Однако было бы неплохо добавить susy к моим опциям SASS в gruntfile.js и иметь возможность делать @import "susy"; вместо.

Answer 1

Хм, если вы сделали свой Gruntfile правильно, я полагаю, что есть проблема с тем, как вы установили susy,

Есть ли у вас правильный (и актуальный 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 - как только я добавил свои опции в файл задач SASS.js, это сработало! Вот шаги, которые я сделал:

Во-первых, если вы ранее не устанавливали генератор йоманов для грудной клетки, запустите:

$ npm install -g yo generator-thorax

Затем создайте приложение 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