Compass + Yeoman

There’s an elegant method to connect Compass to Yeoman I couldn’t find in the web.
One line of code
So I just leave this here.

After generating your project with yo webapp go to Gruntfile.js to sass section. You’ll see something like that:

sass: {
  options: {
    sourcemap: true,
    loadPath: 'bower_components'
  },
  dist: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  },
  server: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  }
}

Just add compass: ” to options section. That’s all! It’s the simplest method I’ve managed to found. Enjoy! Now, sass section will look like:

sass: {
  options: {
    compass: '',
    sourcemap: true,
    loadPath: 'bower_components'
  },
  dist: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  },
  server: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  }
}

Now you can try to @import “compass”; and ensure that compass works correctly.