Using SASS with Aurelia's Skeleton Navigation project

Answer 1

SASS build task

You'll need to install gulp-sass, like you mentioned. Then, you'll want to add the following task to your build file. Notice the task includes plumber and changed as well. This will signal watch to rebuild your sass when you edit it and not break serving on syntax errors.

// compiles sass to css with sourcemaps
gulp.task('build-css', function() {
  return gulp.src(paths.style)
    .pipe(plumber())
    .pipe(changed(paths.style, {extension: '.css'}))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./styles'));
});

Build task

You'll also need to add this new sass build task to your general build task, so that it is included in the build pipeline.

gulp.task('build', function(callback) {
  return runSequence(
    'clean',
    ['build-system', 'build-html', 'build-css'],
    callback
  );
});

Using a CSS framework in code

As you mentioned, having jspm install materialize will let jspm take care of all the heavy lifting for you. Once installed, jspm will modify the config paths to point to the right place. Then, when you need to reference it in code, you can import it normally. To install, you will want to add materialize to your package.json dependencies.

"jspm": {
   "dependencies": {
      "materialize": "github:Dogfalo/materialize@0.96.0",

Then, jspm will set up a map for you so you can use the normal module syntax.

import 'materialize/js/collapsible';

Materialize is not using the module syntax so, at the moment, you will need to (a) import each piece that you want specifically, as above, and (b) manually import jQuery, since materialize doesn't declare dependencies.

For more information, please see my full write up including examples here: http://www.foursails.co/blog/building-sass/