Installing Compass Frameworks in a Yeoman Project

compass_yeoman.md

Because all good things need to be duplicated ...

originally posted @ericdfields.com

Yeoman uses a Grunt.js file for its settings, so installing Compass frameworks is a little bit different…

Any Compass-based project I've worked on had a config.rb where you set your Compass options (or in the case of Rails, config/compass.rb). In a new, bare-bones Yeoman project however, there's no such file. Instead, Yeoman uses Grunt to set the options for the Compass compiler.

How Yeoman Sets Compass Options

The default settings for Compass looks like this:

compass: {
  dist: {
    options: {
      css_dir: 'temp/styles',
      sass_dir: 'app/styles',
      images_dir: 'app/images',
      javascripts_dir: 'temp/scripts',
      force: true
    }
  }
},

Those options should look familiar: they're the same options used to configure Compass projects the world over.

Our Solution

The option require is what we're looking for in this case. Simply add it like so:

compass: {
  dist: {
    options: {
      require: 'susy',
      css_dir: 'temp/styles',
      sass_dir: 'app/styles',
      images_dir: 'app/images',
      javascripts_dir: 'temp/scripts',
      force: true
    }
  }
},

Now you can successfuly @import susy into your SASS files.

To read the full article