The first fails to add the new file to the styles file list. The second one succeeds. I believe it to be related to the component.json being retrieved more than once.

failing.js

var Builder = require('component-builder');
var path = require('path');
var fs = require('fs');
var async = require('async');

var builder = new Builder(__dirname + '/../client/item-view');

builder.use(compileSass);

builder.build(function(err, res){
  if (err) throw err;
  console.log(res);
});

function compileSass(builder) {
  builder.hook('before styles', function(pkg, callback){
    var styles = pkg.conf.sass;
    if (!styles) return callback();

    async.forEach(styles, function(file, callback) {
      var ext = path.extname(file);
      if ('.scss' != ext);

      setTimeout(function() {
        file = path.basename(file, '.scss') + '.css';
        pkg.addFile('styles', file, '.my-styles {}');
        callback();
      }, 50);
    }, function() {
      callback();
    });
  });
}

working.js

var Builder = require('component-builder');
var path = require('path');
var fs = require('fs');
var async = require('async');

var builder = new Builder(__dirname + '/../client/item-view');

builder.use(compileSass);

builder.build(function(err, res){
  if (err) throw err;
  console.log(res);
});

function compileSass(builder) {
  builder.hook('before styles', function(pkg, callback){
    var styles = pkg.conf.sass;
    if (!styles) return callback();

    async.forEach(styles, function(file, callback) {
      var ext = path.extname(file);
      if ('.scss' != ext);

      //setTimeout(function() {
        file = path.basename(file, '.scss') + '.css';
        pkg.addFile('styles', file, '.my-styles {}');
        callback();
      //}, 50);
    }, function() {
      callback();
    });
  });
}